/* Pink Posts UI 0.22.125: simplified product image – no synthetic reflection or shadow. */
.pink-product-image .pink-product-image-shadow,
.pink-product-image .pink-product-image-reflection,
.pink-product-image .pink-product-image-warning,
.pink-product-image .pink-product-image-floor-guide {
    display: none !important;
    visibility: hidden !important;
}

/* Keep the original right-hand rail as a backwards-compatible option. */
.pink-product-image[data-pp125-thumb-layout="below"].has-thumbnails {
    --pp125-rail-reserve: calc(var(--pink-thumb-size, 64px) + 24px);
    box-sizing: border-box;
    padding-bottom: var(--pp125-rail-reserve);
}
.pink-product-image[data-pp125-thumb-layout="below"] .pink-product-image-stage {
    overflow: visible !important;
}
.pink-product-image[data-pp125-thumb-layout="below"] .pink-product-image-thumbnails {
    position: absolute !important;
    z-index: 8;
    /* The native gallery code already measures the visible lower image edge.
       Add the reserved padding back when converting its inset to stage coordinates. */
    top: calc(100% + var(--pp125-rail-reserve, 88px) - var(--pink-thumb-bottom-inset, 0px) + 12px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: 100% !important;
    height: var(--pink-thumb-size, 64px) !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: var(--pink-thumb-gap, 10px);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}
.pink-product-image[data-pp125-thumb-layout="below"] .pink-product-image-thumbnails > .pink-product-image-thumbnail {
    width: var(--pink-thumb-size, 64px) !important;
    min-width: var(--pink-thumb-size, 64px) !important;
    max-width: var(--pink-thumb-size, 64px) !important;
    flex: 0 0 var(--pink-thumb-size, 64px) !important;
    aspect-ratio: 1;
}

/* Option: thumbnails with no colored background (or background at all). */
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail,
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail:hover,
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail[aria-pressed="true"] {
    background: transparent !important;
    box-shadow: none !important;
}
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail {
    border-color: transparent !important;
}
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail[aria-pressed="true"],
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail:focus-visible {
    border-color: var(--pink-primary-color, #b3d47c) !important;
}
.pink-product-image[data-pp125-thumb-bg="transparent"] .pink-product-image-thumbnails > .pink-product-image-thumbnail:hover {
    border-color: rgba(45, 55, 42, .26) !important;
}

/* Native thumbnail hover / selection, for white-background mode. */
.pink-product-image[data-pp125-thumb-bg="white"] .pink-product-image-thumbnails > .pink-product-image-thumbnail {
    background: rgba(255, 255, 255, .85) !important;
}
.pink-product-image .pink-product-image-object {
    backface-visibility: hidden;
    will-change: opacity, filter, translate;
}
@media (prefers-reduced-motion: reduce) {
    .pink-product-image .pink-product-image-object { will-change: auto; }
}