/**
 * Page media overlays (Media Lab) — origin-hosted, not CDN.
 * Overrides flipbook.min.css .pf-page-content { opacity: 0.5 }.
 * 3D blur fix: #pf-page-media-sharp-host is position:fixed on body (outside CSS3D).
 * 2D keeps hotspots in-page (no sharp-host), so page-content must be fully opaque or
 * markers look washed out even at 100% opacity.
 */

/* 2D: annotations stay on the page — never inherit the engine's 0.5 CSS3D fade. */
.pf-flipbook-2d .pf-page-content {
  opacity: 1 !important;
}

.pf-page-content:has(.pf-page-media),
.pf-page-content:has([data-pf-page-media]),
.pf-page-content:has(.pf-page-media-placeholder),
.pf-page-content:has(.customHtmlAnnotation .pf-page-media),
.pf-page-content:has(.pf-page-hotspot),
.pf-page-content:has([data-pf-page-hotspot]),
.pf-page-content:has(.pf-page-product),
.pf-page-content:has([data-pf-product]),
.pf-page-content:has(.pf-page-moreinfo),
.pf-page-content:has(.pf-page-hotspot-placeholder) {
  opacity: 1 !important;
}

.customHtmlAnnotation:has(.pf-page-media),
.customHtmlAnnotation:has(.pf-page-media-placeholder),
.customVideoAnnotation:has(.pf-page-media),
.customHtmlAnnotation:has([data-pf-page-media]),
.pf-page-media,
.pf-page-media-placeholder {
  overflow: hidden !important;
  background: #000 !important;
  opacity: 1 !important;
}

.customHtmlAnnotation:has(.pf-page-media):hover,
.customHtmlAnnotation:has(.pf-page-media-placeholder):hover,
.customVideoAnnotation:has(.pf-page-media):hover,
.customHtmlAnnotation:has([data-pf-page-media]):hover {
  background: #000 !important;
}

/*
 * Icon / pulse markers: never paint a black plate.
 * Under CSS3D perspective, `background: transparent` often composites as solid black —
 * use none + rgba(0,0,0,0) so the soft rollover highlight stays visible.
 */
.customHtmlAnnotation:has(.pf-page-media-icon),
.customHtmlAnnotation:has(.pf-page-media-icon):hover,
.customHtmlAnnotation:has(.pf-page-media-photo-icon),
.customHtmlAnnotation:has(.pf-page-media-photo-icon):hover,
.customHtmlAnnotation:has(.pf-page-media-sound-icon),
.customHtmlAnnotation:has(.pf-page-media-sound-icon):hover,
.customHtmlAnnotation:has(.pf-page-hotspot-pulse),
.customHtmlAnnotation:has(.pf-page-hotspot-pulse):hover,
.customHtmlAnnotation:has(.pf-page-media-placeholder-icon),
.customHtmlAnnotation:has(.pf-page-media-placeholder-icon):hover,
.pf-page-media.pf-page-media-icon,
.pf-page-media.pf-page-media-photo-icon,
.pf-page-media.pf-page-media-sound-icon,
.pf-page-hotspot-pulse,
.pf-page-media-placeholder-icon,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-icon),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-icon):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-photo-icon),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-photo-icon):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-sound-icon),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-sound-icon):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-hotspot-pulse),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-hotspot-pulse):hover,
html.pf-page-media-tilted-mode .pf-page-media.pf-page-media-icon,
html.pf-page-media-tilted-mode .pf-page-media.pf-page-media-photo-icon,
html.pf-page-media-tilted-mode .pf-page-media.pf-page-media-sound-icon,
html.pf-page-media-tilted-mode .pf-page-hotspot-pulse {
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Publuu-style pill player — PDF-Flip chrome */
.pf-page-sound-player {
  position: fixed;
  z-index: 260;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 18.5rem;
  max-width: min(94vw, 26rem);
  padding: 0.4rem 0.55rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  pointer-events: auto;
}
.pf-page-sound-player[hidden] {
  display: none !important;
}
.pf-page-sound-play,
.pf-page-sound-vol,
.pf-page-sound-close {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.pf-page-sound-play:hover,
.pf-page-sound-vol:hover,
.pf-page-sound-close:hover {
  background: #cbd5e1;
}
.pf-page-sound-play svg,
.pf-page-sound-vol svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
.pf-page-sound-vol-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.28rem 0.12rem 0.4rem;
  border-radius: 999px;
  background: #e2e8f0;
  flex-shrink: 0;
}
.pf-page-sound-volume {
  width: 3.6rem;
  accent-color: #12b34a;
  cursor: pointer;
}
.pf-page-sound-vol-wrap .pf-page-sound-vol {
  width: 1.45rem;
  height: 1.45rem;
  background: transparent;
}
.pf-page-sound-vol-wrap .pf-page-sound-vol:hover {
  background: rgba(15, 23, 42, 0.08);
}
.pf-page-sound-close {
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  color: #334155;
}
.pf-page-sound-close:hover {
  background: #e2e8f0;
}
.pf-page-sound-time {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: #0f172a;
  min-width: 4.6rem;
}
.pf-page-sound-scrub {
  flex: 1 1 auto;
  min-width: 3.5rem;
  accent-color: #12b34a;
  height: 0.35rem;
  cursor: pointer;
}
.pf-page-media-sound.is-playing .pf-page-media-icon-disc {
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.35);
}
.pf-page-media-sound.is-muted .pf-page-media-icon-disc {
  opacity: 0.92;
}

.customHtmlAnnotation iframe,
.customVideoAnnotation iframe,
.pf-page-media iframe,
.pf-page-media video,
.pf-page-media-sharp-slot iframe,
.pf-page-media-sharp-slot video {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  display: block !important;
  background: #000 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Video embeds — flat, no frame chrome */
.pf-page-media.pf-page-media-video,
.customHtmlAnnotation:has(.pf-page-media-video),
.customHtmlAnnotation.pf-page-media-has-expand:has(.pf-page-media-video),
.customHtmlAnnotation.pf-page-media-has-bg,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-video),
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-bg-video-slot {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/*
 * Stack: video/photo boxes under linked icons (video/audio/link/photo/shop).
 * Matches flipbook_page_media_link_layer() paint order for 2D in-page annotations.
 */
.customHtmlAnnotation:has(.pf-page-media-video),
.customVideoAnnotation:has(.pf-page-media),
.customHtmlAnnotation:has(.pf-page-media-photo-tour),
.customHtmlAnnotation.pf-page-media-has-photo:not(:has(.pf-page-media-photo-icon)):not(:has(.pf-page-media-icon)) {
  z-index: 2 !important;
}
.customHtmlAnnotation:has(.pf-page-media-icon),
.customHtmlAnnotation:has(.pf-page-media-photo-icon),
.customHtmlAnnotation:has(.pf-page-media-sound-icon),
.customHtmlAnnotation:has(.pf-page-hotspot),
.customHtmlAnnotation:has(.pf-page-hotspot-pulse),
.customHtmlAnnotation:has(.pf-page-hotspot-button),
.customHtmlAnnotation:has(.pf-page-product),
.customHtmlAnnotation:has(.pf-page-moreinfo),
.pf-page-media.pf-page-media-icon,
.pf-page-media.pf-page-media-photo-icon,
.pf-page-media.pf-page-media-sound-icon,
.pf-page-hotspot,
.pf-page-hotspot-pulse {
  z-index: 8 !important;
}

.customHtmlAnnotation:has(.pf-page-media-video):hover,
.customHtmlAnnotation.pf-page-media-has-bg:hover {
  background: #000 !important;
  box-shadow: none !important;
}

/* Ambient background video — fill box, no UI chrome, clicks pass through */
.pf-page-media.pf-page-media-bg,
.pf-page-media[data-pf-media-bg="1"] {
  pointer-events: none !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pf-page-media.pf-page-media-bg video,
.pf-page-media[data-pf-media-bg="1"] video {
  object-fit: cover !important;
}
.pf-page-media.pf-page-media-bg .pf-page-media-expand,
.pf-page-media[data-pf-media-bg="1"] .pf-page-media-expand,
.customHtmlAnnotation.pf-page-media-has-bg .pf-page-media-expand,
#pf-page-media-sharp-host .is-bg-video-slot .pf-page-media-expand,
#pf-page-media-sharp-host .is-bg-video-slot .pf-page-media-play,
#pf-page-media-sharp-host .is-bg-video-slot .pf-page-media-tap {
  display: none !important;
}
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-bg-video-slot {
  pointer-events: none !important;
  background: #000 !important;
}

/* Fixed host — must escape any parent transform / perspective.
   Keep above pages, but BELOW flipbook chrome (arrows, toolbar, search/thumbs). */
#pf-page-media-sharp-host.pf-page-media-sharp-host {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 40 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease, visibility 0s linear 0s;
}

/* Flipbook UI above hotspots / page-media embeds.
   Only boost sidemenu while open — a closed compact sheet sits just under the
   toolbar and would otherwise peek out as a second “navbar” above the real one. */
.pf-container > .pf-ui-nav,
.pf-container .pf-ui-nav {
  z-index: 220 !important;
}
.pf-container .pf-ui {
  z-index: 210 !important;
}
.pf-container .pf-sidemenu-toggles {
  z-index: 215 !important;
}
.pf-container.pf-sidemenu-open .pf-sidemenu-backdrop {
  z-index: 230 !important;
}
.pf-container.pf-sidemenu-open .pf-ui {
  z-index: 235 !important;
}
.pf-container.pf-sidemenu-open .pf-sidemenu-wrapper {
  z-index: 245 !important;
}

/* 2D arrow flips:
   - Turning sheet gets .pf-flipping
   - gotoPage also sets .pf-pending, which hides ALL .pf-page-content
     (so the resting page lost hotspots while only the flip sheet stayed).
   While a 2D sheet is flipping, keep overlays painted on the whole spread.
   Origin CSS — overrides CDN flipbook.min.css without touching the engine JS. */
.pf-flipbook-2d .pf-sheet.pf-flipping .pf-page-content,
.pf-container.pf-pending:has(.pf-flipbook-2d .pf-sheet.pf-flipping) .pf-page-content {
  display: block !important;
  pointer-events: none !important;
}

/* Fade sharp-host embeds out during 3D flip; fade back in when the turn settles */
#pf-page-media-sharp-host.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

#pf-page-media-sharp-host.is-hidden .pf-page-media-sharp-slot {
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #pf-page-media-sharp-host.pf-page-media-sharp-host,
  #pf-page-media-sharp-host.is-hidden {
    transition: none;
  }
}

#pf-page-media-sharp-host .pf-page-media-sharp-slot {
  position: fixed !important;
  overflow: hidden !important;
  background: #000 !important;
  pointer-events: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
  -webkit-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#pf-page-media-sharp-host .pf-page-media {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  filter: none !important;
}

.customHtmlAnnotation.pf-page-media-lifted {
  background: #000 !important;
  opacity: 1 !important;
}

.pf-page-media-placeholder {
  width: 100%;
  height: 100%;
  background: #000 !important;
}

/* Page-turn highlight removed from editor (square outline looked wrong on icons). */
.pf-page-media-highlight {
  box-shadow: none;
  animation: none;
}

/* Enlarge control — discreet corner-brackets, no heavy chrome */
.pf-page-media-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: none;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.88;
}

.pf-page-media-expand:hover,
.pf-page-media-expand:focus-visible {
  background: rgba(0, 0, 0, 0.48);
  outline: none;
  opacity: 1;
}

/* Four open corners (modern expand / fullscreen glyph) */
.pf-page-media-expand > span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
  background:
    linear-gradient(currentColor, currentColor) left top / 4.5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 4.5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 4.5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 4.5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1.5px 4.5px no-repeat;
}

.pf-page-media-expand > span::before {
  content: none;
  display: none;
}

.customHtmlAnnotation.pf-page-media-has-expand,
.pf-page-media-sharp-slot {
  position: relative;
}

.customHtmlAnnotation.pf-page-media-has-expand {
  position: absolute !important;
}

.pf-page-media-expand--inpage {
  position: absolute;
}

/* Mobile: catch taps before YouTube/Vimeo (red Play → our enlarge modal) */
.pf-page-media-modal-gated {
  position: relative;
}

.pf-page-media-modal-gated > .pf-page-media iframe,
.pf-page-media-modal-gated .pf-page-media iframe {
  pointer-events: none !important;
}

.pf-page-media-tap {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pf-page-media-tap-play {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  position: relative;
}

.pf-page-media-tap-play::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

.pf-page-media-tap:active .pf-page-media-tap-play {
  transform: scale(0.96);
}

/* Direct HTML5 video: big play overlay (stops page-flip on body click) */
.pf-page-media-direct-gated {
  position: relative;
}

.pf-page-media-play {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pf-page-media-play.is-hidden {
  display: none !important;
}

.pf-page-media-play:active .pf-page-media-tap-play {
  transform: scale(0.96);
}

/* Publuu-style facade: thumbnail + clean play (iframe loads after click) */
.pf-page-media-has-facade,
.pf-page-media:has(.pf-page-media-facade) {
  position: relative !important;
}

.pf-page-media-facade {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pf-page-media-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.pf-page-media-facade-play {
  position: relative;
  z-index: 1;
  display: block;
  width: min(72px, 28%);
  height: min(72px, 28%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 0.15s ease, background 0.15s ease;
}

.pf-page-media-facade-play::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.pf-page-media-facade:hover .pf-page-media-facade-play {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.04);
}

.pf-page-media-facade:active .pf-page-media-facade-play {
  transform: scale(0.96);
}

@media (max-width: 720px) {
  .pf-page-media-facade-play {
    width: min(36px, 30%);
    height: min(36px, 30%);
    border-width: 1.5px;
  }

  .pf-page-media-facade-play::before {
    border-width: 7px 0 7px 11px;
  }
}

/* Play-icon hotspot: spaced ring + SVG play (opens enlarge modal) */
.pf-page-media-icon {
  position: relative;
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  overflow: visible !important;
}

/* Soft plate behind icon — same size as the icon box. Color at 20% alpha; visible on rollover only. */
.pf-page-icon-highlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.16s ease;
  /* Keep translucent paint correct inside CSS3D pages */
  transform: translateZ(0.01px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pf-page-media:hover > .pf-page-icon-highlight,
.pf-page-media:focus-within > .pf-page-icon-highlight,
.pf-page-hotspot-pulse:hover > .pf-page-icon-highlight,
.pf-page-hotspot-pulse:focus-visible > .pf-page-icon-highlight,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:hover .pf-page-icon-highlight,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:focus-within .pf-page-icon-highlight {
  opacity: 1;
}

/* Kill engine annotation hover wash on icon markers (esp. under perspective). */
.customHtmlAnnotation:has(.pf-page-media-icon):hover,
.customHtmlAnnotation:has(.pf-page-media-photo-icon):hover,
.customHtmlAnnotation:has(.pf-page-hotspot-pulse):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-icon):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-photo-icon):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-hotspot-pulse):hover {
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.pf-page-media-icon-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pf-page-media-icon-disc {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same default as hotspot/product/photo pulse cores — fill the hit box up to 80px. */
  width: min(80px, 100%);
  height: min(80px, 100%);
  min-width: 10px;
  min-height: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Border stays on this non-rotating shell — rotating a bordered circle paints a white square. */
  border: 2px solid var(--pf-media-icon-fg, #dfdfdf);
  background: var(--pf-media-icon-bg, #dc2626);
  opacity: var(--pf-media-icon-opacity, 1);
  padding: 0;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
  color: var(--pf-media-icon-fg, #dfdfdf);
}

/*
 * SVG spin mode: real <circle> (not HTML border-radius).
 * Rotating HTML discs with white borders paints a white square — SVG does not.
 */
.pf-page-media-icon-disc.pf-page-icon-svg-mode,
.pf-page-hotspot-pulse-core.pf-page-icon-svg-mode {
  background: transparent !important;
  border-color: transparent !important;
  /* Keep layout size; stroke lives on the SVG circle */
}

.pf-page-icon-live-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.pf-page-icon-spin-root {
  transform-origin: 32px 32px;
  transform-box: view-box;
}

@keyframes pf-icon-intro-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pf-page-icon-spin-root.pf-icon-intro-spin {
  animation: pf-icon-intro-spin 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

/* Never CSS-rotate the HTML bordered shell / legacy glyph wrappers */
.pf-page-media-icon-disc.pf-icon-intro-spin,
.pf-page-hotspot-pulse-core.pf-icon-intro-spin,
.pf-page-media-icon-core.pf-icon-intro-spin,
.pf-page-media-icon-play.pf-icon-intro-spin,
.pf-page-media-icon-glyph.pf-icon-intro-spin,
.pf-page-hotspot-pulse-icon.pf-icon-intro-spin,
.pf-page-icon-spin-face.pf-icon-intro-spin {
  animation: none !important;
  transform: none !important;
}

.pf-page-media-icon-disc [data-pf-icon-legacy="1"],
.pf-page-hotspot-pulse-core [data-pf-icon-legacy="1"] {
  display: none !important;
}

.pf-page-media-icon-pulse-ring.pf-icon-intro-wait,
.pf-page-hotspot-pulse-ring.pf-icon-intro-wait {
  opacity: 0 !important;
  animation: none !important;
}

/* Hide soft highlight plate while spinning — square plate reads as the “white square”. */
.pf-page-media:has(.pf-icon-intro-spin) > .pf-page-icon-highlight,
.pf-page-hotspot-pulse:has(.pf-icon-intro-spin) > .pf-page-icon-highlight {
  opacity: 0 !important;
}

.pf-page-media-icon-core {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  transition: filter 0.16s ease;
}

.pf-page-media-icon-play {
  display: block;
  width: 56%;
  height: 56%;
  margin-left: 7%;
  color: var(--pf-media-icon-fg, #dfdfdf);
  overflow: visible;
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

.pf-page-media-icon-glyph {
  display: block;
  width: 52%;
  height: 52%;
  margin-left: 0;
  color: var(--pf-media-icon-fg, #dfdfdf);
  overflow: visible;
  pointer-events: none;
}

/* Photo tour embed on page — hard rectangle, no soft edge / frame chrome */
.pf-page-media.pf-page-media-photo-tour,
.pf-page-media-photo-tour {
  position: relative;
  overflow: hidden !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  /* Hard clip kills subpixel AA “bleed” on composited overlays */
  clip-path: inset(0) !important;
  -webkit-clip-path: inset(0) !important;
  -webkit-mask-image: linear-gradient(#000 0 0) !important;
  mask-image: linear-gradient(#000 0 0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
  pointer-events: auto;
}

.customHtmlAnnotation:has(.pf-page-media-photo-tour),
.customHtmlAnnotation.pf-page-media-has-photo,
.customHtmlAnnotation.pf-page-media-lifted-photo,
.customHtmlAnnotation:has(.pf-page-media-photo-tour):hover,
.customHtmlAnnotation.pf-page-media-has-photo:hover,
.customHtmlAnnotation.pf-page-media-lifted-photo:hover,
.customHtmlAnnotation.pf-page-media-lifted.pf-page-media-lifted-photo,
.pf-page-media-placeholder-photo,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-tour),
#pf-page-media-sharp-host .pf-page-media-sharp-slot.pf-page-media-has-photo,
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-photo-slot {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  background: transparent !important;
  /* Placeholder/annotation stay transparent so a 1px misalign never reads as a dark frame */
}

#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-photo-slot,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-tour) {
  overflow: hidden !important;
  background: transparent !important;
  clip-path: inset(0) !important;
  -webkit-clip-path: inset(0) !important;
  -webkit-mask-image: linear-gradient(#000 0 0) !important;
  mask-image: linear-gradient(#000 0 0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*
 * Animated GIF sticker — must clear the global `.pf-page-media { background:#000 }` plate.
 * Under CSS3D, `transparent` often composites as solid black; use none + rgba(0,0,0,0)
 * (same trick as pulse/icon markers). The in-page sharp-lift placeholder sits under the GIF,
 * so a black placeholder reads as an opaque box through transparent GIF pixels.
 */
.customHtmlAnnotation:has(.pf-page-media-photo-gif),
.customHtmlAnnotation:has(.pf-page-media-photo-gif):hover,
.customHtmlAnnotation:has(.pf-page-media-placeholder-gif),
.customHtmlAnnotation:has(.pf-page-media-placeholder-gif):hover,
.customHtmlAnnotation.pf-page-media-has-gif,
.customHtmlAnnotation.pf-page-media-has-gif:hover,
.customHtmlAnnotation.pf-page-media-lifted-gif,
.customHtmlAnnotation.pf-page-media-lifted-gif:hover,
.pf-page-media.pf-page-media-photo-gif,
.pf-page-media-photo-gif,
.pf-page-media-placeholder-gif,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-gif),
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-gif-slot,
#pf-page-media-sharp-host .pf-page-media-sharp-slot.pf-page-media-has-gif,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-photo-gif),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-photo-gif):hover,
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-placeholder-gif),
html.pf-page-media-tilted-mode .customHtmlAnnotation:has(.pf-page-media-placeholder-gif):hover,
html.pf-page-media-tilted-mode .pf-page-media.pf-page-media-photo-gif {
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  border: 0 !important;
}

.pf-page-media.pf-page-media-photo-gif,
.pf-page-media-photo-gif {
  position: relative;
  overflow: hidden !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pf-page-photo-gif-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: var(--pf-gif-opacity, 1);
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
}

/* GIFs may visually overlay hotspots / icons / buttons, but never steal clicks — unless linked. */
.customHtmlAnnotation:has(.pf-page-media-photo-gif:not(.is-linked)),
.customHtmlAnnotation:has(.pf-page-media-placeholder-gif),
.customHtmlAnnotation.pf-page-media-has-gif:not(:has(.pf-page-media-photo-gif.is-linked)),
.customHtmlAnnotation.pf-page-media-lifted-gif:not(:has(.pf-page-media-photo-gif.is-linked)) {
  pointer-events: none !important;
}

.pf-page-media.pf-page-media-photo-gif.is-linked,
a.pf-page-media-photo-gif.is-linked {
  pointer-events: auto !important;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}

.customHtmlAnnotation:has(.pf-page-media-photo-gif.is-linked),
.customHtmlAnnotation.pf-page-media-has-gif:has(.pf-page-media-photo-gif.is-linked),
.customHtmlAnnotation.pf-page-media-lifted-gif:has(.pf-page-media-photo-gif.is-linked),
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-gif-slot:has(.pf-page-media-photo-gif.is-linked),
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-gif.is-linked) {
  pointer-events: auto !important;
}

#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-gif-slot,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-gif),
#pf-page-media-sharp-host .pf-page-media-sharp-slot.pf-page-media-has-gif {
  overflow: hidden !important;
  pointer-events: none !important;
  /* No photo-tour mask/clip — let GIF alpha punch through cleanly */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-gif-slot:has(.pf-page-media-photo-gif.is-linked),
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-gif.is-linked) {
  pointer-events: auto !important;
}

.pf-page-photo-tour-stage {
  position: absolute;
  /* Overscan fills subpixel gaps that otherwise show as a faded edge */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pf-page-photo-tour-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pf-page-photo-tour-img.is-active {
  opacity: 1;
  z-index: 1;
}

.pf-page-photo-tour-prev,
.pf-page-photo-tour-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  /* No filter:drop-shadow — it softens the embed’s outer edge */
  filter: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.92;
}

.pf-page-photo-tour-prev svg,
.pf-page-photo-tour-next svg {
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: none;
  /* Contrast without outer glow bleed */
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.25px;
  paint-order: stroke fill;
}

.pf-page-photo-tour-prev { left: 2px; }
.pf-page-photo-tour-next { right: 2px; }

/* Single photo: never show tour arrows (even if stale HTML still has them) */
.pf-page-media-photo-tour.is-single-photo > .pf-page-photo-tour-prev,
.pf-page-media-photo-tour.is-single-photo > .pf-page-photo-tour-next,
.pf-page-media-photo-tour[data-pf-photo-count="0"] > .pf-page-photo-tour-prev,
.pf-page-media-photo-tour[data-pf-photo-count="0"] > .pf-page-photo-tour-next,
.pf-page-media-photo-tour[data-pf-photo-count="1"] > .pf-page-photo-tour-prev,
.pf-page-media-photo-tour[data-pf-photo-count="1"] > .pf-page-photo-tour-next,
.pf-page-media-photo-tour:has(.pf-page-photo-tour-stage > .pf-page-photo-tour-img:only-of-type) > .pf-page-photo-tour-prev,
.pf-page-media-photo-tour:has(.pf-page-photo-tour-stage > .pf-page-photo-tour-img:only-of-type) > .pf-page-photo-tour-next {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.pf-page-photo-tour-prev:hover,
.pf-page-photo-tour-next:hover,
.pf-page-photo-tour-prev:focus-visible,
.pf-page-photo-tour-next:focus-visible {
  background: transparent;
  outline: none;
  opacity: 1;
  filter: none;
  transform: translateY(-50%) scale(1.06);
}

/* Autoplay tours: arrows only while the tour is hovered (not sticky after click focus) */
@media (hover: hover) and (pointer: fine) {
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"] > .pf-page-photo-tour-prev,
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"] > .pf-page-photo-tour-next {
    opacity: 0;
    pointer-events: none !important;
  }

  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"]:hover > .pf-page-photo-tour-prev,
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"]:hover > .pf-page-photo-tour-next {
    opacity: 0.92;
    pointer-events: auto !important;
  }

  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"]:hover > .pf-page-photo-tour-prev:hover,
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"]:hover > .pf-page-photo-tour-next:hover {
    opacity: 1;
  }

  /* Keyboard only: reveal the focused arrow, not both via :focus-within */
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"] > .pf-page-photo-tour-prev:focus-visible,
  .pf-page-media-photo-tour[data-pf-photo-autoplay="1"] > .pf-page-photo-tour-next:focus-visible {
    opacity: 1;
    pointer-events: auto !important;
  }
}

.pf-page-media-photo-tour .pf-page-media-expand {
  z-index: 9;
  width: 26px;
  height: 26px;
  top: 8px;
  right: 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: auto !important;
}

/* Tour option: Allow lightbox off — never show enlarge control */
.pf-page-media-photo-tour.is-lightbox-off > .pf-page-media-expand,
.pf-page-media-photo-tour[data-pf-photo-lightbox="0"] > .pf-page-media-expand,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-tour.is-lightbox-off) > .pf-page-media-expand,
#pf-page-media-sharp-host .pf-page-media-sharp-slot:has(.pf-page-media-photo-tour[data-pf-photo-lightbox="0"]) > .pf-page-media-expand {
  display: none !important;
  pointer-events: none !important;
}

.pf-page-media-photo-tour .pf-page-media-expand > span {
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) left top / 3.5px 1.25px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1.25px 3.5px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 3.5px 1.25px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1.25px 3.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 3.5px 1.25px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1.25px 3.5px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 3.5px 1.25px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1.25px 3.5px no-repeat;
}

.pf-page-media-photo-tour .pf-page-media-expand > span::before {
  content: none;
  display: none;
}

#pf-page-media-sharp-host .pf-page-media-photo-tour,
#pf-page-media-sharp-host .pf-page-photo-tour-prev,
#pf-page-media-sharp-host .pf-page-photo-tour-next,
#pf-page-media-sharp-host .pf-page-media-photo-tour .pf-page-media-expand {
  pointer-events: auto !important;
}

/* Fullscreen photo tour — Publuu-style: stage + thumbs below, no frame chrome */
.pf-page-media-modal.is-photo-lightbox {
  padding: 0.5rem;
}

.pf-page-media-modal.is-photo-lightbox .pf-page-media-modal-backdrop {
  background: rgba(0, 0, 0, 0.92);
}

.pf-page-media-modal.is-photo-lightbox .pf-page-media-modal-dialog {
  width: min(96vw, 1100px);
  height: min(94vh, 920px);
  max-height: min(94vh, 920px);
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.pf-page-media-modal.is-photo-lightbox .pf-page-media-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.pf-page-media-modal.is-photo-lightbox .pf-page-media-modal-close {
  width: 46px;
  height: 46px;
  font-size: 1.85rem;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}

/* Website link iframe lightbox — same large chrome as photo tour */
.pf-page-media-modal.is-link-lightbox {
  padding: 0.5rem;
}

.pf-page-media-modal.is-link-lightbox .pf-page-media-modal-backdrop {
  background: rgba(0, 0, 0, 0.92);
}

.pf-page-media-modal.is-link-lightbox .pf-page-media-modal-dialog {
  width: min(96vw, 1100px);
  height: min(94vh, 920px);
  max-height: min(94vh, 920px);
  aspect-ratio: auto;
  background: #0f172a;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-page-media-modal.is-link-lightbox .pf-page-media-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.pf-page-media-modal.is-link-lightbox .pf-page-media-modal-close {
  width: 46px;
  height: 46px;
  font-size: 1.85rem;
  top: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  box-shadow: none;
}

.pf-page-link-lightbox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pf-page-link-lightbox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  background: #fff;
}

.pf-page-photo-lightbox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2.75rem 0.5rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  border: 0;
  box-shadow: none;
}

.pf-page-photo-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
}

.pf-page-photo-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pf-page-photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
  opacity: 0.9;
}

.pf-page-photo-lightbox-nav svg {
  display: block;
  width: 54px;
  height: 54px;
  pointer-events: none;
}

.pf-page-photo-lightbox-nav:hover,
.pf-page-photo-lightbox-nav:focus-visible {
  background: transparent;
  outline: none;
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
  transform: translateY(-50%) scale(1.06);
}

.pf-page-photo-lightbox-prev { left: 4px; }
.pf-page-photo-lightbox-next { right: 4px; }

.pf-page-photo-lightbox-thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0 0.5rem 0.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pf-page-photo-lightbox-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: #1a1a1a center/cover no-repeat;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pf-page-photo-lightbox-thumb:hover,
.pf-page-photo-lightbox-thumb:focus-visible {
  opacity: 1;
  outline: none;
}

.pf-page-photo-lightbox-thumb.is-active {
  border-color: #fff;
  opacity: 1;
}

@media (max-width: 640px) {
  .pf-page-media-modal.is-photo-lightbox .pf-page-media-modal-dialog,
  .pf-page-media-modal.is-link-lightbox .pf-page-media-modal-dialog {
    width: calc(100vw - 0.5rem);
    height: min(92vh, 100%);
    border-radius: 0;
  }
  .pf-page-photo-lightbox {
    padding: 2.75rem 0.25rem 0.65rem;
    gap: 0.65rem;
  }
  .pf-page-photo-lightbox-nav {
    width: 58px;
    height: 58px;
  }
  .pf-page-photo-lightbox-nav svg {
    width: 44px;
    height: 44px;
  }
  .pf-page-photo-lightbox-prev { left: 0; }
  .pf-page-photo-lightbox-next { right: 0; }
  .pf-page-photo-lightbox-thumb {
    width: 46px;
    height: 46px;
  }
}

.pf-page-media-icon-pulse-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 118%;
  height: 118%;
  border-radius: 999px;
  border: 2px solid var(--pf-media-icon-fg, #dfdfdf);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Peak opacity lives in the keyframes — keep base in sync with hotspot rings. */
  opacity: 0.7;
  animation: pf-media-icon-pulse 1.8s ease-out infinite;
}

@keyframes pf-media-icon-pulse {
  0% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.7; }
  70% { transform: translate(-50%, -50%) scale(1.28); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.28); opacity: 0; }
}

.pf-page-media-icon-hit:hover .pf-page-media-icon-disc,
.pf-page-media-icon-hit:focus-visible .pf-page-media-icon-disc {
  border-color: var(--pf-media-icon-fg, #dfdfdf);
  box-shadow: none;
  transform: scale(1.05);
  filter: brightness(0.92);
}

.pf-page-media-icon-hit:focus-visible {
  outline: none;
}

.pf-page-media-icon-hit:active .pf-page-media-icon-disc {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .pf-page-media-icon-pulse-ring {
    animation: none;
    opacity: 0.4;
  }
  .pf-page-icon-spin-root.pf-icon-intro-spin {
    animation: none;
  }
  .pf-page-media-icon-pulse-ring.pf-icon-intro-wait,
  .pf-page-hotspot-pulse-ring.pf-icon-intro-wait {
    opacity: 0.4 !important;
  }
}

/* Sharp overlay: icons must stay transparent (no black video plate) */
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-icon-slot {
  background: transparent !important;
  overflow: visible !important;
}

.customHtmlAnnotation.pf-page-media-lifted-icon,
.pf-page-media-placeholder-icon {
  background: transparent !important;
}

@media (max-width: 720px) {
  .pf-page-media-icon-disc,
  .pf-page-hotspot-pulse-core {
    width: min(48px, 100%);
    height: min(48px, 100%);
    border-width: 2px;
  }
  .pf-page-media-icon-play {
    width: 54%;
    height: 54%;
  }
}

/* Enlarge modal */
.pf-page-media-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.pf-page-media-modal.is-open,
.pf-page-media-modal.is-closing {
  display: flex;
}

.pf-page-media-modal.is-open {
  opacity: 1;
}

.pf-page-media-modal.is-closing {
  opacity: 0;
}

.pf-page-media-modal[hidden] {
  display: none !important;
}

.pf-page-media-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
}

.pf-page-media-modal-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-page-media-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100vw - 2rem));
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 2.5rem);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  transform: translateY(10px) scale(0.985);
  opacity: 0.88;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.pf-page-media-modal.is-open .pf-page-media-modal-dialog {
  transform: none;
  opacity: 1;
}

.pf-page-media-modal.is-closing .pf-page-media-modal-dialog {
  transform: translateY(6px) scale(0.99);
  opacity: 0.9;
}

.pf-page-media-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.pf-page-media-modal-frame,
.pf-page-media-modal-frame iframe,
.pf-page-media-modal-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

html.pf-page-media-modal-open {
  overflow: hidden;
}

/* —— Page hotspots (Hotspots Lab) —— */
/* Kill flipbook.min.css blue square hover on hotspot annotations */
.customHtmlAnnotation:has(.pf-page-hotspot),
.customHtmlAnnotation:has(.pf-page-hotspot):hover,
.customHtmlAnnotation:has([data-pf-page-hotspot]),
.customHtmlAnnotation:has([data-pf-page-hotspot]):hover {
  background: transparent !important;
  border-color: transparent !important;
  overflow: visible !important;
}

.pf-page-hotspot-invisible.pf-page-hotspot-hover-on:hover,
.pf-page-hotspot-invisible.pf-page-hotspot-hover-on:focus-visible {
  background: var(--pf-hotspot-hover, rgba(25, 118, 210, 0.45)) !important;
}

.pf-page-hotspot {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Clicks must hit the <a> itself — engine treats non-A targets as click-to-flip. */
.pf-page-hotspot > *,
.pf-page-hotspot-pulse > *,
.pf-page-hotspot-button > * {
  pointer-events: none;
}

.pf-page-hotspot[role="presentation"] {
  cursor: default;
  pointer-events: none;
}

.pf-page-hotspot-invisible {
  background: transparent;
  border: 0;
}

.pf-page-hotspot-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.35em 0.7em;
  border-radius: var(--pf-hotspot-radius, 8px);
  background: var(--pf-hotspot-bg, #1d4ed8);
  color: var(--pf-hotspot-fg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font: 600 0.875rem / 1.25 system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  /* Avoid filter/subpixel translate — both blur text inside CSS3D pages */
  transition: box-shadow 0.12s ease, background-color 0.12s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pf-page-hotspot-font-sm {
  font-size: 0.75rem !important;
}
.pf-page-hotspot-font-md {
  font-size: 0.875rem !important;
}
.pf-page-hotspot-font-lg {
  font-size: 1.05rem !important;
}

.pf-page-hotspot-button:hover,
.pf-page-hotspot-button:focus-visible {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  filter: none;
  transform: translateZ(0);
}

.pf-page-hotspot-button-label {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
  text-align: center;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Sharp overlay for button/pulse — escape CSS3D page blur */
#pf-page-media-sharp-host .pf-page-media-sharp-slot.is-hotspot-slot {
  background: transparent !important;
  overflow: visible !important;
}

#pf-page-media-sharp-host .pf-page-hotspot-button {
  transform: none !important;
  filter: none !important;
}

.customHtmlAnnotation.pf-page-media-lifted-hotspot,
.pf-page-hotspot-placeholder {
  background: transparent !important;
  overflow: visible !important;
}

.pf-page-hotspot-pulse {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0;
  overflow: visible;
  color: var(--pf-hotspot-icon, #dfdfdf);
  /* Opacity is baked into CSS vars (rgba); keep element fully opaque */
  opacity: 1;
  cursor: pointer;
}

.pf-page-hotspot-pulse[role="presentation"] {
  cursor: default;
  pointer-events: none;
}

.customHtmlAnnotation:has(.pf-page-hotspot-pulse):hover {
  background: transparent !important;
}

/* Match video play-icon disc: same size, border, pulse ring, hover scale */
.pf-page-hotspot-pulse-core {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(80px, 100%);
  height: min(80px, 100%);
  min-width: 10px;
  min-height: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pf-hotspot-pulse, #1d4ed8);
  /* Border on non-rotating shell (same anti-square rule as media icons) */
  border: 2px solid var(--pf-hotspot-icon, #dfdfdf);
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
  transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
  color: var(--pf-hotspot-icon, #dfdfdf);
}

.pf-page-hotspot-pulse-icon {
  display: block;
  width: 56%;
  height: 56%;
  min-width: 8px;
  min-height: 8px;
  color: var(--pf-hotspot-icon, #dfdfdf);
  line-height: 0;
  pointer-events: none;
}

.pf-page-hotspot-pulse-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pf-page-hotspot-pulse-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 118%;
  height: 118%;
  min-width: 18px;
  min-height: 18px;
  border-radius: 999px;
  /* Full-alpha ring color (set in PHP) so every pulse type matches. */
  border: 2px solid var(--pf-hotspot-pulse-ring, var(--pf-hotspot-icon, #dfdfdf));
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.7;
  animation: pf-media-icon-pulse 1.8s ease-out infinite;
}

.pf-page-hotspot-pulse:hover .pf-page-hotspot-pulse-core,
.pf-page-hotspot-pulse:focus-visible .pf-page-hotspot-pulse-core {
  border-color: var(--pf-hotspot-icon, #dfdfdf);
  box-shadow: none;
  transform: scale(1.05);
  filter: brightness(0.92);
}

.pf-page-hotspot-pulse:focus-visible {
  outline: none;
}

.pf-page-hotspot-pulse:active .pf-page-hotspot-pulse-core {
  transform: scale(0.96);
}

/* Sharp host: keep pulse container flat; hover scale on the disc/core */
#pf-page-media-sharp-host .pf-page-hotspot-pulse {
  transform: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .pf-page-hotspot-pulse-core {
    width: min(48px, 100%);
    height: min(48px, 100%);
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-page-hotspot-pulse-ring {
    animation: none;
    opacity: 0.4;
  }
  .pf-page-icon-spin-root.pf-icon-intro-spin {
    animation: none;
  }
  .pf-page-hotspot-pulse:hover .pf-page-hotspot-pulse-core,
  .pf-page-hotspot-pulse:focus-visible .pf-page-hotspot-pulse-core,
  .pf-page-hotspot-pulse:active .pf-page-hotspot-pulse-core {
    transform: none;
  }
}

/* Product Tag pulse: same disc/icon proportions as link/phone pulse */

/* —— Product Tag modal —— */
.pf-page-product-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.pf-page-product-modal.is-open,
.pf-page-product-modal.is-closing { display: flex; }
.pf-page-product-modal.is-open { opacity: 1; }
.pf-page-product-modal.is-closing { opacity: 0; }
.pf-page-product-modal[hidden] { display: none !important; }
.pf-page-product-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
}
.pf-page-product-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: min(980px, calc(100vw - 1.25rem));
  /* Fixed tall shell so portrait product photos can fill the media column */
  height: min(680px, calc(100vh - 1.5rem));
  max-height: min(680px, calc(100vh - 1.5rem));
  background: #fff;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
  transform: translateY(10px) scale(0.985);
  opacity: 0.92;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.pf-page-product-modal.is-open .pf-page-product-dialog {
  transform: none;
  opacity: 1;
}
.pf-page-product-modal.is-closing .pf-page-product-dialog {
  transform: translateY(6px) scale(0.99);
  opacity: 0.92;
}
/* No photos/video — drop the empty media column */
.pf-page-product-dialog.is-text-only {
  width: min(420px, calc(100vw - 1.5rem));
  height: auto;
  max-height: min(520px, calc(100vh - 1.75rem));
}
.pf-page-product-dialog.is-text-only .pf-page-product-media,
.pf-page-product-media[hidden] {
  display: none !important;
}
.pf-page-product-dialog.is-text-only .pf-page-product-info {
  flex: 1 1 auto;
}
.pf-page-product-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  pointer-events: auto;
}
.pf-page-product-close > span {
  display: block;
  line-height: 1;
  pointer-events: none;
}
.pf-page-product-close:hover,
.pf-page-product-close:focus-visible {
  color: #374151;
  outline: none;
  background: transparent;
}
.pf-page-product-media {
  flex: 0 0 52%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 0.7rem 0.55rem;
  background: #eef0f2;
  overflow: hidden;
  box-sizing: border-box;
}
/* Default stage fills leftover height; JS sizes .is-fitted to the photo aspect. */
.pf-page-product-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 1 1 0;
  min-height: 220px;
  max-height: 100%;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}
/* Sized to the active photo — fill the media column, keep full photo */
.pf-page-product-stage.is-fitted {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-stage {
  background: #eef0f2;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-media {
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 0.85rem 0.75rem;
}
.pf-page-product-main-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.pf-page-product-stage.is-fitted .pf-page-product-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-page-product-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #111;
  overflow: hidden;
}
.pf-page-product-video iframe,
.pf-page-product-video video {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #111;
}
.pf-page-product-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-height: 62px;
  padding-bottom: 2px;
}
.pf-page-product-thumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c4c9d0 transparent;
}
.pf-page-product-thumbs::-webkit-scrollbar {
  height: 4px;
}
.pf-page-product-thumbs::-webkit-scrollbar-thumb {
  background: #c4c9d0;
  border-radius: 999px;
}
.pf-page-product-thumbs::-webkit-scrollbar-track {
  background: transparent;
}
.pf-page-product-thumbs-nav {
  flex: 0 0 auto;
  width: 22px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.pf-page-product-thumbs-nav[hidden] { display: none !important; }
.pf-page-product-thumbs-nav:hover,
.pf-page-product-thumbs-nav:focus-visible {
  background: #fff;
  color: #374151;
  outline: none;
}
.pf-page-product-thumbs-nav > span {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}
.pf-page-product-thumbs-prev > span {
  border-width: 5px 6px 5px 0;
  border-color: transparent currentColor transparent transparent;
}
.pf-page-product-thumbs-next > span {
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
}
.pf-page-product-thumb {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #d1d5db center/cover no-repeat;
  cursor: pointer;
  padding: 0;
  position: relative;
  opacity: 0.88;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pf-page-product-thumb:hover,
.pf-page-product-thumb:focus-visible {
  opacity: 1;
  outline: none;
}
.pf-page-product-thumb.is-active {
  border-color: #1f2937;
  opacity: 1;
}
.pf-page-product-thumb.is-video {
  background-color: #111827;
}
.pf-page-product-thumb.is-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  border-radius: inherit;
  pointer-events: none;
}
/* Circle + play triangle overlay */
.pf-page-product-thumb.is-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 7.5v9l7.5-4.5L9 7.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  background-size: 11px 11px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.pf-page-product-info {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.55rem 1.65rem 1.25rem;
  overflow: auto;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #c4c9d0 transparent;
}
.pf-page-product-info::-webkit-scrollbar {
  width: 8px;
}
.pf-page-product-info::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
  border: 2px solid #fff;
}
.pf-page-product-info::-webkit-scrollbar-track {
  background: transparent;
}
.pf-page-product-info-main {
  flex: 1 1 auto;
  min-height: 0;
}
.pf-page-product-title {
  margin: 0 0 0.35rem;
  font: 600 1.45rem/1.28 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #374151;
  letter-spacing: -0.015em;
  padding-right: 1.75rem;
}
.pf-page-product-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0.15rem 0 1rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f3f4f6;
  font: 600 0.72rem/1.2 "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.pf-page-product-unavailable[hidden] { display: none !important; }
.pf-page-product-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.9rem;
}
.pf-page-product-prices[hidden] { display: none !important; }
.pf-page-product-price-old {
  font: 500 0.9rem/1.2 "Segoe UI", system-ui, sans-serif;
  color: #9ca3af;
  text-decoration: line-through;
}
.pf-page-product-price-new {
  font: 600 1.2rem/1.2 "Segoe UI", system-ui, sans-serif;
  color: #374151;
}
.pf-page-product-cta {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto !important;
  max-width: 100%;
  height: 2.15rem !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 1.1rem;
  padding: 0 1.15rem !important;
  border: 1px solid #059669 !important;
  border-radius: 999px;
  background: #059669;
  color: #fff !important;
  font: 600 0.72rem/1 "Segoe UI", system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pf-page-product-cta:hover {
  background: #047857;
  border-color: #047857 !important;
  color: #fff !important;
}
/* Placeholder "#" CTA: looks fully active (hover + pointer) but JS blocks navigation */
.pf-page-product-cta.is-inactive,
.pf-page-product-cta[aria-disabled="true"] {
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}
.pf-page-product-cta[hidden] { display: none !important; }
.pf-page-product-desc {
  margin: 0 0 1rem;
  font: 400 0.92rem/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #6b7280;
  white-space: pre-wrap;
}
.pf-page-product-desc[hidden] { display: none !important; }
/* More Info Popup: title → scrolling description → button */
.pf-page-product-modal.is-moreinfo .pf-page-product-info {
  overflow: hidden;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-info-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-title {
  flex: 0 0 auto;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-desc {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  margin-bottom: 1.1rem;
  padding-right: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4c9d0 transparent;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-desc::-webkit-scrollbar {
  width: 8px;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-desc::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
  border: 2px solid #fff;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-desc::-webkit-scrollbar-track {
  background: transparent;
}
.pf-page-product-modal.is-moreinfo .pf-page-product-cta {
  order: 2;
  flex: 0 0 auto;
  margin-bottom: 0;
}
.pf-page-product-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: auto;
  padding-top: 0.85rem;
}
.pf-page-product-share[hidden] { display: none !important; }
.pf-page-product-share-label {
  margin: 0;
  font: 600 0.7rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}
.pf-page-product-share-row { display: flex; gap: 0.35rem; }
.pf-page-product-share-btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background-color: #4b5563;
  background-position: center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}
.pf-page-product-share-btn--fb {
  background-color: #4b5563;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E");
}
.pf-page-product-share-btn--li {
  background-color: #4b5563;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.5 9H3.6v11h2.9V9zM5 3.7A1.7 1.7 0 1 0 5 7.1 1.7 1.7 0 0 0 5 3.7zM20.4 13.3c0-2.9-1.6-4.3-3.6-4.3-1.7 0-2.4.9-2.8 1.6V9H11v11h2.9v-6.1c0-1.6.3-3.1 2.3-3.1s2.1 1.8 2.1 3.2V20h3.1v-6.7z'/%3E%3C/svg%3E");
}
.pf-page-product-share-btn--x {
  background-color: #4b5563;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.2 3H21l-6.5 7.4L22 21h-6.2l-4.9-6.4L5.4 21H2.6l7-8L2 3h6.3l4.4 5.8L18.2 3zm-1.1 16.2h1.7L7 4.7H5.2l11.9 14.5z'/%3E%3C/svg%3E");
}
.pf-page-product-share-btn--mail {
  background-color: #4b5563;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.pf-page-product-cta-icon {
  width: 0.75rem !important;
  height: 0.75rem !important;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.pf-page-product-modal-open { overflow: hidden; }
@media (max-width: 820px) {
  .pf-page-product-dialog {
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 1rem);
    width: min(520px, calc(100vw - 1rem));
  }
  .pf-page-product-dialog.is-text-only {
    width: min(420px, calc(100vw - 1rem));
  }
  .pf-page-product-media {
    flex: 0 1 auto;
    height: auto;
    max-height: min(420px, 52vh);
    padding: 0.65rem 0.65rem 0.55rem;
  }
  .pf-page-product-stage {
    max-width: 100%;
    flex: 1 1 0;
    min-height: 200px;
  }
  .pf-page-product-thumb {
    width: 50px;
    height: 50px;
  }
  .pf-page-product-info {
    padding: 1.15rem 1.2rem 1rem;
  }
  .pf-page-product-title {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-page-media-modal,
  .pf-page-media-modal-dialog,
  .pf-page-product-modal,
  .pf-page-product-dialog {
    transition: none !important;
  }
  .pf-page-media-modal-dialog,
  .pf-page-media-modal.is-closing .pf-page-media-modal-dialog,
  .pf-page-product-dialog,
  .pf-page-product-modal.is-closing .pf-page-product-dialog {
    transform: none !important;
  }
}