/* No saving photos/videos by dragging, selecting or phone long-press ("Save to Photos") */
img, video, picture, .gatsby-image-wrapper, #SRLLightbox {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Page switching: smooth crossfade instead of a full reload */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; }
body { transition: opacity .2s ease; }
body.page-leaving, body.page-entering { opacity: 0; }

/* Keep the navbar and its menus above the hero text/buttons,
   but let clicks pass through the empty part of the (full-height) nav layer */
.nav-container { z-index: 20; pointer-events: none; }
.nav-container nav, .nav-container .navbar-collapse.show { pointer-events: auto; }

/* Flip cards: the hidden front face must not swallow clicks meant for the back's button */
.card:hover .card-front, .card.flipped .card-front { pointer-events: none; }
.card.flipped .card-inner { transform: rotateX(180deg); }

/* Photo lightbox (same look as the original Simple React Lightbox) */
.product-img { cursor: pointer; }
#SRLLightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(30, 30, 30, 0.9);
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity .3s linear;
    font-family: var(--common-font);
    -webkit-user-select: none; user-select: none;
}
#SRLLightbox.open { opacity: 1; }
#SRLLightbox .SRLStage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#SRLLightbox .SRLElementContainer { flex: 1; min-height: 0; padding: 50px 50px 0; display: flex; }
#SRLLightbox .SRLElementWrapper { position: relative; flex: 1; overflow: hidden; }
#SRLLightbox .SRLImage {
    position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
    opacity: 0; transition: opacity .6s linear, transform .3s ease; cursor: zoom-in; -webkit-user-drag: none;
}
#SRLLightbox .SRLImage.shown { opacity: 1; }
#SRLLightbox .SRLImage.zoomed { cursor: grab; transition: opacity .6s linear; }
#SRLLightbox .SRLImage.zoomed.dragging { cursor: grabbing; }
#SRLLightbox .SRLCaptionText { color: #fff; font-size: 16px; font-weight: 400; text-align: center; padding: 20px 0 30px; min-height: 18px; }
#SRLLightbox button {
    width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 0; cursor: pointer;
    background: rgba(30, 30, 36, 0.8); display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
#SRLLightbox button:hover { background: rgba(30, 30, 36, 1); }
#SRLLightbox button svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.8); }
#SRLLightbox .SRLControls { position: absolute; top: 5px; right: 5px; display: flex; gap: 5px; z-index: 2; }
#SRLLightbox .SRLNextButton, #SRLLightbox .SRLPrevButton { position: absolute; top: calc(50% - 50px); z-index: 2; }
#SRLLightbox .SRLNextButton { right: 5px; }
#SRLLightbox .SRLPrevButton { left: 5px; }
#SRLLightbox .SRLThumbnailsContainer { display: flex; justify-content: center; overflow-x: auto; height: 75px; flex: 0 0 auto; padding: 0 0 15px; }
#SRLLightbox.no-thumbs .SRLThumbnailsContainer { display: none; }
#SRLLightbox .SRLThumb {
    flex: 0 0 auto; width: 80px; height: 60px; margin: 0 1px;
    background-size: cover; background-position: center; opacity: .4; cursor: pointer; transition: opacity .3s;
}
#SRLLightbox .SRLThumb.active, #SRLLightbox .SRLThumb:hover { opacity: 1; }
@media (max-width: 768px) {
    #SRLLightbox button { width: 33px; height: 33px; padding: 7px; }
    #SRLLightbox .SRLElementContainer { padding: 45px 5px 0; }
    #SRLLightbox .SRLThumbnailsContainer { justify-content: flex-start; }
}

/* Same "background stays still while you scroll" look as the original parallax sections,
   without background-attachment:fixed (which repaints the whole screen on every scroll frame) */
.parallax, .parallax2 { background-attachment: scroll; position: relative; clip-path: inset(0); }
.parallax::before, .parallax2::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background-image: inherit; background-size: cover; background-position: 50%; background-repeat: no-repeat;
    will-change: transform;
}

/* iPhone Safari ignores overflow-x on body alone, letting the page slide sideways */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip !important; } }

/* Flip cards: one even border all the way round; the photo stays inside it (no corners covering it, no white showing) */
.cards .card, .card:has(.card-inner) {
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: .375rem !important;
    background-color: transparent !important;
    overflow: hidden;
}

/* Photos inside flip cards: no extra 3D layer (breaks backface hiding in Safari) */
.card [data-main-image], .card [data-placeholder-image] { transform: none !important; will-change: auto !important; }

/* Touch screens: flip cards fade between front and back instead of a 3D flip (Safari renders the 3D flip wrongly) */
@media (hover: none) {
    .card-inner, .card:hover .card-inner, .card.flipped .card-inner {
        transform: none !important; -webkit-transform: none !important;
        transform-style: flat; -webkit-transform-style: flat; transition: none;
    }
    .card-front, .card-back {
        transform: none !important; -webkit-transform: none !important;
        backface-visibility: visible; -webkit-backface-visibility: visible;
        transition: opacity .5s ease;
    }
    .card-back { opacity: 0; pointer-events: none; }
    .card.flipped .card-back { opacity: 1; pointer-events: auto; }
    .card.flipped .card-front { opacity: 0; }
}

/* Background videos fill their banner like the original */
.video-container video, .video-container2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}