/* Sweet SFX Product Gallery: card flip, decks of thumbnails, captions over
   the image, and the Savage 3.0 hover (see gallery.js). */

.ssfx-pg { --ssfx-accent: #e50914; position: relative; user-select: none; -webkit-user-select: none; min-width: 0; max-width: 100%; }
.ssfx-pg.is-pending .ssfx-pg__view,
.ssfx-pg.is-pending .ssfx-pg__thumbs-area { opacity: 0; }

/* The theme styles every <button>: Hello's reset (pink border, padding, a
   0.3s transition on everything, a pink fill on hover) and the Elementor kit
   (red fill, its own type). The gallery's buttons keep their own look, so
   these, and the button rules below that differ from them, are !important. */
.ssfx-pg button, .ssfx-pg button:hover, .ssfx-pg button:focus, .ssfx-pg button:active,
.ssfx-pg-box button, .ssfx-pg-box button:hover, .ssfx-pg-box button:focus, .ssfx-pg-box button:active {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important;
  background: none !important; box-shadow: none !important; color: inherit !important; text-decoration: none !important;
  font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: normal !important;
  line-height: normal !important; letter-spacing: normal !important; text-transform: none !important; white-space: normal !important;
}

/* The view holds the moving image (frame) and, over it, controls that stay still. */
.ssfx-pg__view { position: relative; }
.ssfx-pg__controls { position: absolute; inset: 0; z-index: 101; pointer-events: none; }
.ssfx-pg__controls > button { pointer-events: auto; }
.ssfx-pg__frame { position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform; }
.ssfx-pg__frame.is-hovered { z-index: 100; } /* above the thumbnails and the summary while it lifts */

/* The stage doesn't clip: the flip may spill past the image's edges. */
.ssfx-pg__stage { position: relative; aspect-ratio: 1 / 1; overflow: visible; background: transparent; cursor: zoom-in; touch-action: pan-y; perspective: 1400px; outline: none; }
.ssfx-pg__stage:focus-visible { box-shadow: 0 0 0 3px var(--ssfx-accent); }
.ssfx-pg__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.ssfx-pg__slide.is-active { opacity: 1; z-index: 2; }
.ssfx-pg__slide.is-leaving { opacity: 1; z-index: 1; }
.ssfx-pg .ssfx-pg__slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; border: 0; box-shadow: none; }
.ssfx-pg__shine { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: screen; will-change: opacity; }

.ssfx-pg .ssfx-pg__controls .ssfx-pg__arrow { position: absolute; top: 50%; z-index: 6; width: 44px !important; height: 44px !important; margin-top: -22px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.9) !important; color: #000 !important; font-size: 24px !important; line-height: 44px !important; text-align: center; cursor: pointer; opacity: 0;
  pointer-events: none; transition: opacity .2s, transform .2s, background-color .2s, color .2s !important; box-shadow: 0 2px 10px rgba(0,0,0,.25) !important; }
.ssfx-pg__arrow--prev { left: 12px; transform: translateX(-8px); }
.ssfx-pg__arrow--next { right: 12px; transform: translateX(8px); }
/* Once the entrance has finished (gallery.js adds .is-ready), the arrows show while the mouse is over the gallery, and the counter fades in. */
.ssfx-pg.is-ready:hover .ssfx-pg__controls .ssfx-pg__arrow, .ssfx-pg.is-ready .ssfx-pg__controls .ssfx-pg__arrow:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.ssfx-pg .ssfx-pg__controls .ssfx-pg__arrow:hover, .ssfx-pg .ssfx-pg__controls .ssfx-pg__arrow:focus-visible { background: var(--ssfx-accent) !important; color: #fff !important; }
.ssfx-pg__count { position: absolute; right: 12px; top: 12px; z-index: 6; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1.5; padding: 2px 10px; border-radius: 12px; opacity: 0; transition: opacity .45s ease; }
.ssfx-pg.is-ready .ssfx-pg__count { opacity: 1; }
.ssfx-pg__capwrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.ssfx-pg__overlay-cap { padding: 40px 16px 14px; color: #fff; font-size: 15px; font-weight: 400; line-height: 1.4;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; }

/* Thumbnails: decks. One group shows (Library or Images); the other waits as
   a fanned stack. Thumbnails keep one size in both decks and sit centred. */
.ssfx-pg__thumbs-area { margin-top: 12px; perspective: 900px; }
.ssfx-pg__deckhead { display: flex; justify-content: center; }
.ssfx-pg__label { font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-bottom: 6px; white-space: nowrap; }
.ssfx-pg__deck { --gap: 6px; display: flex; justify-content: center; gap: var(--gap); padding-top: 4px; }
.ssfx-pg__deck > * { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
/* Contents stack from the top: a button centres them, which dropped a thumbnail without a label below its neighbours. */
.ssfx-pg .ssfx-pg__thumb { display: flex !important; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.ssfx-pg__thumb { position: relative; min-width: 0; cursor: pointer; text-align: center; user-select: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1) !important; }
/* Image rules start with .ssfx-pg so they outrank Elementor's `.elementor img` (square corners, no shadow, height auto), which loads later. */
.ssfx-pg .ssfx-pg__thumb img { width: 100%; aspect-ratio: 1 / 1; height: auto; max-width: none; object-fit: cover; display: block; border-radius: 4px;
  outline: 2px solid transparent; outline-offset: -2px; opacity: .72; transition: opacity .2s, outline-color .2s, box-shadow .25s; }
.ssfx-pg__thumb:hover { transform: translateY(-3px); }
.ssfx-pg__thumb:hover img { opacity: 1; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.ssfx-pg__thumb.is-active, .ssfx-pg__thumb.is-active:hover { transform: none; } /* the selected one rests level; the outline marks it */
.ssfx-pg__thumb.is-active img { opacity: 1; outline-color: var(--ssfx-accent); box-shadow: none; } /* the red line marks it; no red glow */
.ssfx-pg__thumb span { display: block; font-size: 11px; line-height: 1.25; margin-top: 4px; color: #333; overflow-wrap: anywhere; }
.ssfx-pg__thumb.is-active span { font-weight: 600; color: #000; }
/* Library thumbnails (main artwork and versions) round like the artwork's own corners (about 16% of its width, measured on the 296 GTB art); Images stay square. */
.ssfx-pg .ssfx-pg__thumb--library img { border-radius: 16%; }
.ssfx-pg__stack { position: relative; display: block; cursor: pointer; aspect-ratio: 1 / 1; align-self: start; transition: none !important; }
.ssfx-pg .ssfx-pg__stack img { position: absolute; inset: 6%; width: 88%; height: 88%; max-width: none; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ssfx-pg__stack img:nth-child(1) { transform: rotate(-9deg) translateX(-4%); }
.ssfx-pg__stack img:nth-child(2) { transform: rotate(6deg) translateX(4%); }
.ssfx-pg__stack img:nth-child(3) { transform: rotate(-1deg); }
.ssfx-pg__stack:hover img:nth-child(1) { transform: rotate(-16deg) translate(-14%, -4%); }
.ssfx-pg__stack:hover img:nth-child(2) { transform: rotate(13deg) translate(14%, -4%); }
.ssfx-pg__stack:hover img:nth-child(3) { transform: translateY(-8%); }
.ssfx-pg__stack b { position: absolute; z-index: 2; left: 50%; bottom: -2px; transform: translateX(-50%); background: var(--ssfx-accent); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }

@media (max-width: 480px) {
  .ssfx-pg__thumb span { font-size: 10px; }
  .ssfx-pg__deck { --gap: 4px; }
}
@media (hover: none) { .ssfx-pg .ssfx-pg__controls .ssfx-pg__arrow { display: none !important; } }

/* Full-size view */
.ssfx-pg-box { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; flex-direction: column; touch-action: pan-y; }
.ssfx-pg-box.is-open { display: flex; }
.ssfx-pg-box img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; transform-origin: 0 0; }
.ssfx-pg-box__caption { color: #ddd; font-size: 15px; margin-top: 14px; min-height: 1.5em; padding: 0 16px; text-align: center; }
.ssfx-pg-box .ssfx-pg-box__btn, .ssfx-pg-box .ssfx-pg-box__btn:hover, .ssfx-pg-box .ssfx-pg-box__btn:focus, .ssfx-pg-box .ssfx-pg-box__btn:active { position: absolute; color: #fff !important; font-size: 34px !important; line-height: 1 !important; cursor: pointer; padding: 12px 18px !important; }
.ssfx-pg-box .ssfx-pg-box__btn:hover, .ssfx-pg-box .ssfx-pg-box__btn:focus-visible { color: #e50914 !important; }
.ssfx-pg-box__close { top: 8px; right: 8px; }
.ssfx-pg-box__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.ssfx-pg-box__next { right: 8px; top: 50%; transform: translateY(-50%); }