/* Shari's Home Cooking | media-fitted spatial gallery v3.
   The media owns card geometry; the carousel owns the perspective and controls.
   Facebook feed iframe stays independent and collapses when unavailable. */
#gallery .gallery-grid.shari-spatial-grid,
#gallery .facebook-photos-grid.shari-spatial-grid {
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:clamp(14px,2.1vw,25px)!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:var(--shari-stage-min,300px)!important;
  margin:0!important;
  padding:17px var(--shari-pad-right,18px) 22px var(--shari-pad-left,18px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(217,31,104,.55) transparent;
  perspective:880px!important;
  -webkit-perspective:880px!important;
  perspective-origin:center 50%!important;
  isolation:isolate!important;
  touch-action:pan-x pan-y!important;
}
#gallery .gallery-grid.shari-spatial-grid {
  border:1px solid rgba(217,31,104,.22)!important;
  border-radius:20px!important;
  background:radial-gradient(ellipse at 50% 48%,#fff7fa 0%,#ffe7f0 75%,#fce0ea 100%)!important;
}
#gallery .facebook-photos-grid.shari-spatial-grid {
  margin:.55rem 0 1rem!important;
  border:1px solid rgba(24,119,242,.13)!important;
  border-radius:17px!important;
  background:linear-gradient(120deg,#f4f8ff,#fff8fc)!important;
}
#gallery .facebook-photos-grid.shari-spatial-grid[hidden],
#gallery .gallery-3d-controls[hidden],
#gallery .gallery-grid.shari-spatial-grid:empty {
  display:none!important;
}
#gallery .gallery-uploaded {
  min-width:0!important;
}
#gallery .gallery-grid.shari-spatial-grid > .gallery-card,
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card {
  --shari-x:0px;
  --shari-z:0px;
  --shari-rot:0deg;
  --shari-scale:1;
  --shari-opacity:1;
  position:relative!important;
  display:block!important;
  grid-column:auto!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  width:var(--shari-card-width,250px)!important;
  max-width:none!important;
  min-width:0!important;
  height:var(--shari-card-height,280px)!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:2px solid rgba(217,31,104,.62)!important;
  border-radius:14px!important;
  background:#120c11!important;
  transform:translate3d(var(--shari-x),0,var(--shari-z)) rotateY(var(--shari-rot)) scale(var(--shari-scale))!important;
  -webkit-transform:translate3d(var(--shari-x),0,var(--shari-z)) rotateY(var(--shari-rot)) scale(var(--shari-scale))!important;
  transform-origin:center center!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  opacity:var(--shari-opacity)!important;
  box-shadow:0 12px 23px rgba(76,8,32,.23)!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always;
  will-change:transform;
  transition:transform 230ms cubic-bezier(.2,.8,.2,1),opacity 190ms ease,box-shadow 230ms ease!important;
}
#gallery .gallery-grid.shari-spatial-grid > .gallery-card[data-spatial-center="true"],
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card[data-spatial-center="true"] {
  z-index:7!important;
  opacity:1!important;
  border-color:#ec3881!important;
  box-shadow:0 18px 42px rgba(92,10,38,.33),0 0 0 3px rgba(236,76,137,.13)!important;
}
#gallery .gallery-grid.shari-spatial-grid > .gallery-card img,
#gallery .gallery-grid.shari-spatial-grid > .gallery-card video,
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card img {
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  min-width:0!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#120c11!important;
  backface-visibility:hidden!important;
}
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card a {
  display:block!important;
  width:100%!important;
  height:100%!important;
}
#gallery .gallery-grid.shari-spatial-grid > .gallery-card .gallery-3d-caption,
#gallery .gallery-grid.shari-spatial-grid > .gallery-card figcaption,
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card figcaption {
  display:none!important;
}
#gallery .gallery-video-badge {
  z-index:3!important;
  pointer-events:none!important;
}
#gallery .gallery-3d-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:min(470px,100%);
  margin:10px auto 18px;
  padding:6px;
  border:1px solid rgba(217,31,104,.31);
  border-radius:999px;
  background:#fff;
  box-shadow:0 7px 22px rgba(111,28,61,.1);
}
#gallery .gallery-3d-controls button {
  flex:0 0 auto;
  min-width:80px;
  min-height:44px;
  padding:7px 11px;
  border:1px solid #d91f68;
  border-radius:999px;
  background:#d91f68;
  color:#fff;
  font:750 .85rem/1.2 system-ui,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
#gallery .gallery-3d-controls button:disabled{opacity:.36;cursor:default}
#gallery .gallery-3d-count{
  flex:1 1 auto;min-width:0;text-align:center;color:#852449;
  font:750 .85rem/1.25 system-ui,sans-serif;
}
#gallery .gallery-3d-controls :focus-visible {
  outline:3px solid #1d0e18;outline-offset:3px;
}
@media(max-width:600px) {
  #gallery .gallery-uploaded {padding-inline:8px!important}
  #gallery .gallery-grid.shari-spatial-grid {
    border-radius:13px!important;
  }
  #gallery .gallery-3d-controls button {
    min-width:75px;padding:7px 9px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #gallery .shari-spatial-grid > .gallery-card,
  #gallery .shari-spatial-grid > .facebook-photo-card {
    transform:none!important;
    -webkit-transform:none!important;
    opacity:1!important;
    will-change:auto!important;
    transition:none!important;
  }
}


/* Stable snap geometry: the outer media card NEVER transforms. Only its
   inner face rotates in 3D, so scroll-snap cannot shift the landing point. */
#gallery .gallery-grid.shari-spatial-grid > .gallery-card,
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card {
  transform:none!important;
  -webkit-transform:none!important;
  opacity:1!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:none!important;
  overflow:visible!important;
  background:transparent!important;
  transition:none!important;
  backface-visibility:visible!important;
}
#gallery .gallery-grid.shari-spatial-grid > .gallery-card[data-spatial-center="true"],
#gallery .facebook-photos-grid.shari-spatial-grid > .facebook-photo-card[data-spatial-center="true"] {
  border:0!important;
  box-shadow:none!important;
}
#gallery .shari-spatial-grid > .gallery-card > .shari-3d-face,
#gallery .shari-spatial-grid > .facebook-photo-card > .shari-3d-face {
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  border:2px solid rgba(217,31,104,.62)!important;
  border-radius:14px!important;
  background:#120c11!important;
  overflow:hidden!important;
  transform:translate3d(var(--shari-x,0px),0,var(--shari-z,0px)) rotateY(var(--shari-rot,0deg)) scale(var(--shari-scale,1))!important;
  -webkit-transform:translate3d(var(--shari-x,0px),0,var(--shari-z,0px)) rotateY(var(--shari-rot,0deg)) scale(var(--shari-scale,1))!important;
  transform-origin:center!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  opacity:var(--shari-opacity,1)!important;
  box-shadow:0 12px 23px rgba(76,8,32,.23)!important;
  will-change:transform;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease,box-shadow 240ms ease!important;
}
#gallery .shari-spatial-grid > .gallery-card[data-spatial-center="true"] > .shari-3d-face,
#gallery .shari-spatial-grid > .facebook-photo-card[data-spatial-center="true"] > .shari-3d-face {
  border-color:#ec3881!important;
  box-shadow:0 18px 42px rgba(92,10,38,.33),0 0 0 3px rgba(236,76,137,.13)!important;
}
#gallery .shari-spatial-grid > .gallery-card > .shari-3d-face > img,
#gallery .shari-spatial-grid > .gallery-card > .shari-3d-face > video,
#gallery .shari-spatial-grid > .facebook-photo-card > .shari-3d-face img {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
#gallery .gallery-grid.shari-spatial-grid,
#gallery .facebook-photos-grid.shari-spatial-grid {
  scroll-behavior:auto!important;
  scroll-padding-inline:0!important;
}
@media(prefers-reduced-motion:reduce) {
  #gallery .shari-spatial-grid > .gallery-card > .shari-3d-face,
  #gallery .shari-spatial-grid > .facebook-photo-card > .shari-3d-face {
    transform:none!important;
    -webkit-transform:none!important;
    opacity:1!important;
    transition:none!important;
    will-change:auto!important;
  }
}


/* v5 | Deterministic indexed carousel. There is no scroll-snap target to drift:
   one selected card sits at the exact stage center, with two small 3D previews. */
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery {
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:var(--shari-stage-h,400px)!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  overscroll-behavior-x:contain!important;
  scroll-snap-type:none!important;
  scrollbar-width:none!important;
  perspective:1050px!important;
  -webkit-perspective:1050px!important;
  perspective-origin:center center!important;
  isolation:isolate!important;
  touch-action:pan-y!important;
}
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card {
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  box-sizing:border-box!important;
  display:block!important;
  flex:none!important;
  width:var(--shari-card-width,250px)!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--shari-card-height,300px)!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  opacity:1!important;
  overflow:visible!important;
  scroll-snap-align:none!important;
  transform:translate(-50%,-50%) translate3d(var(--shari-stage-x,0px),0,0)!important;
  -webkit-transform:translate(-50%,-50%) translate3d(var(--shari-stage-x,0px),0,0)!important;
  transform-origin:center center!important;
  backface-visibility:visible!important;
  box-shadow:none!important;
  transition:transform 325ms cubic-bezier(.22,.79,.22,1),visibility 0s linear 325ms!important;
  will-change:transform!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-spatial-position="center"],
#gallery .shari-indexed-gallery > .facebook-photo-card[data-spatial-position="center"] {
  visibility:visible!important;
  pointer-events:auto!important;
  transition:transform 325ms cubic-bezier(.22,.79,.22,1),visibility 0s!important;
}
#gallery .shari-indexed-gallery > .gallery-card > .shari-3d-face,
#gallery .shari-indexed-gallery > .facebook-photo-card > .shari-3d-face {
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  border:2px solid rgba(217,31,104,.58)!important;
  border-radius:14px!important;
  background:#170e14!important;
  transform:translate3d(0,0,var(--shari-z,0px)) rotateY(var(--shari-rot,0deg)) scale(var(--shari-scale,1))!important;
  -webkit-transform:translate3d(0,0,var(--shari-z,0px)) rotateY(var(--shari-rot,0deg)) scale(var(--shari-scale,1))!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
  opacity:var(--shari-opacity,1)!important;
  box-shadow:0 10px 27px rgba(87,13,39,.22)!important;
  transition:transform 325ms cubic-bezier(.22,.79,.22,1),opacity 280ms ease,box-shadow 280ms ease!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-spatial-position="center"] > .shari-3d-face,
#gallery .shari-indexed-gallery > .facebook-photo-card[data-spatial-position="center"] > .shari-3d-face {
  border-color:#ed3982!important;
  box-shadow:0 20px 45px rgba(92,10,38,.28),0 0 0 3px rgba(239,79,141,.15)!important;
}
#gallery .shari-indexed-gallery > .gallery-card > .shari-3d-face img,
#gallery .shari-indexed-gallery > .gallery-card > .shari-3d-face video,
#gallery .shari-indexed-gallery > .facebook-photo-card > .shari-3d-face img {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
#gallery .shari-indexed-gallery > .gallery-card figcaption,
#gallery .shari-indexed-gallery > .facebook-photo-card figcaption,
#gallery .shari-indexed-gallery > .gallery-card .gallery-3d-caption {
  display:none!important;
}
#gallery .shari-indexed-gallery[hidden],
#gallery .gallery-3d-controls[hidden] {
  display:none!important;
}
@media(prefers-reduced-motion:reduce) {
  #gallery .shari-indexed-gallery > .gallery-card,
  #gallery .shari-indexed-gallery > .facebook-photo-card,
  #gallery .shari-indexed-gallery > .gallery-card > .shari-3d-face,
  #gallery .shari-indexed-gallery > .facebook-photo-card > .shari-3d-face {
    transition:none!important;
    will-change:auto!important;
  }
}

/* Flip motion is applied only to the unrestricted inner surface.
   Unlike the surrounding card/face, it has no !important transform,
   allowing the Web Animations API to complete a full two-sided turn. */
#gallery .shari-indexed-gallery .shari-flip-surface {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-origin:center center;
}
#gallery .shari-indexed-gallery .shari-flip-surface img,
#gallery .shari-indexed-gallery .shari-flip-surface video {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

/* Only the active face rests on the stage. Other media cannot linger halfway. */
#gallery .shari-indexed-gallery > .gallery-card:not([data-spatial-position="center"]),
#gallery .shari-indexed-gallery > .facebook-photo-card:not([data-spatial-position="center"]) {
  visibility:hidden!important;
  pointer-events:none!important;
}


/* Shari Blush Gallery v8. No black backing, and no edge-on blank between images.
   Frames remain native-ratio; transitions animate the inner surface only. */
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery {
  background:radial-gradient(ellipse at 50% 40%,#fffafc 0%,#fff0f6 58%,#fce0eb 100%)!important;
  border:1px solid #f3b5ce!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78),0 12px 32px rgba(202,65,117,.09)!important;
}
#gallery .shari-indexed-gallery > .gallery-card,
#gallery .shari-indexed-gallery > .facebook-photo-card {
  background:transparent!important;
}
#gallery .shari-indexed-gallery > .gallery-card > .shari-3d-face,
#gallery .shari-indexed-gallery > .facebook-photo-card > .shari-3d-face {
  background:#fff5f9!important;
  border:2px solid #de4c87!important;
  box-shadow:0 18px 43px rgba(149,42,87,.18),0 0 0 4px rgba(255,255,255,.62)!important;
  overflow:hidden!important;
}
#gallery .shari-indexed-gallery .shari-flip-surface,
#gallery .shari-indexed-gallery .shari-flip-surface img,
#gallery .shari-indexed-gallery .shari-flip-surface video,
#gallery .shari-indexed-gallery .shari-3d-face img,
#gallery .shari-indexed-gallery .shari-3d-face video {
  background:#fff5f9!important;
  background-color:#fff5f9!important;
}
#gallery .shari-indexed-gallery .shari-flip-surface img,
#gallery .shari-indexed-gallery .shari-flip-surface video {
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-shari-transition],
#gallery .shari-indexed-gallery > .facebook-photo-card[data-shari-transition] {
  visibility:visible!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:none!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-shari-transition="incoming"],
#gallery .shari-indexed-gallery > .facebook-photo-card[data-shari-transition="incoming"] {
  z-index:22!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-shari-transition="outgoing"],
#gallery .shari-indexed-gallery > .facebook-photo-card[data-shari-transition="outgoing"] {
  z-index:21!important;
}
#gallery .shari-indexed-gallery > .gallery-card[data-shari-transition] > .shari-3d-face,
#gallery .shari-indexed-gallery > .facebook-photo-card[data-shari-transition] > .shari-3d-face {
  transform:none!important;
  -webkit-transform:none!important;
  opacity:1!important;
  box-shadow:0 18px 43px rgba(149,42,87,.17),0 0 0 3px rgba(255,255,255,.62)!important;
  transition:none!important;
}
#gallery .shari-indexed-gallery .shari-flip-surface {
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}
@media(prefers-reduced-motion:reduce) {
  #gallery .shari-indexed-gallery [data-shari-transition] .shari-flip-surface {
    transition:none!important;
    animation:none!important;
  }
}


/* v8 precedence guard: these selectors outrank the original dark 3D rules. */
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card > .shari-3d-face,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card > .shari-3d-face {
  background:#fff5f9!important;
  background-color:#fff5f9!important;
}
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card .shari-flip-surface,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card .shari-flip-surface,
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card .shari-flip-surface img,
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card .shari-flip-surface video,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card .shari-flip-surface img {
  background:#fff5f9!important;
  background-color:#fff5f9!important;
}
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card[data-shari-transition],
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card[data-shari-transition] {
  visibility:visible!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:none!important;
  transform:translate(-50%,-50%) translate3d(0,0,0)!important;
  -webkit-transform:translate(-50%,-50%) translate3d(0,0,0)!important;
}
#gallery .gallery-grid.shari-spatial-grid.shari-indexed-gallery > .gallery-card[data-shari-transition] > .shari-3d-face,
#gallery .facebook-photos-grid.shari-spatial-grid.shari-indexed-gallery > .facebook-photo-card[data-shari-transition] > .shari-3d-face {
  transform:none!important;
  -webkit-transform:none!important;
  opacity:1!important;
  background:#fff5f9!important;
  transition:none!important;
}