@charset "UTF-8";

/* ExireNexus design classes */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.mw-1400 {
    max-width: 1400px;
}

.mw-800 {
    max-width: 800px;
}

.mw-650 {
    max-width: 650px;
}

.ff-serif {
    font-family: "Times New Roman", Times, serif;
}

.ff-sans-serif {
    font-family: Arial, Helvetica, sans-serif;
}

.ff-monospace {
    font-family: "Courier New", Courier, monospace;
}
.ff-cursive {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.ff-fantasy {
    font-family: "Impact", fantasy;
}
.ff-system-ui {
    font-family: system-ui;
}

.fs-7 {
    font-size: 0.75rem;
}

.bottom-40 {
    bottom: 40%;
}

.bottom-30 {
    bottom: 30%;
}

.bottom-20 {
    bottom: 20%;
}

.bottom-10{
    bottom: 10%;
}

/* Animations and transformations */
@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slide-right, .anim-slide-left {
    opacity: 1; /* fallback: fully visible if unsupported */
}

@supports (animation-timeline: view()) {
    .anim-slide-right {
        animation: slide-in-right linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .anim-slide-left {
        animation: slide-in-left linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.anim-fade, .anim-zoom {
    opacity: 1; /* fallback: fully visible if unsupported */
}

@supports (animation-timeline: view()) {
    .anim-fade {
        animation: fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .anim-zoom {
        animation: zoom-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

.hover-rise {
    transition: 300ms ease-out;
}

.hover-rise:hover {
    transform: translateY(-4px);
    box-shadow: 0 11px 27px rgba(0, 0, 0, .27), 0 0 1px rgba(1, 0, 0, .17);
}

.hover-rotate {
    transition: .2s ease-out;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: perspective(999px) rotateX(0deg) translateZ(0);
    backface-visibility: hidden;
    will-change: transform,box-shadow
}

    .hover-rotate:hover {
        transform: perspective(999px) rotateX(7deg) translate3d(0,-4px,5px)
    }

.hover-shadow {
    transition: 300ms ease-out;
}

    .hover-shadow:hover {
        box-shadow: 0 11px 27px rgba(0, 0, 0, .27), 0 0 1px rgba(1, 0, 0, .17);
    }

.hover-darker {
    transition: 300ms ease-out;
    }
    .hover-darker:hover {
        filter: brightness(0.9);
    }


/* Search panel */

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #888;
}

.search-icon-input {
    padding-left: 35px;
}

.p-6 {
    padding: 4.5rem !important;
}

.m-6 {
    margin: 4.5rem !important;
}

.p-7 {
    padding: 6rem !important;
}

.m-7 {
    margin: 6rem !important;
}

/* LARGER PADDINGS AND MARGINS */

.pt-6 {
    padding-top: 4.5rem !important;
}

.pb-6 {
    padding-bottom: 4.5rem !important;
}

.ps-6 {
    padding-left: 4.5rem !important;
}

.pe-6 {
    padding-right: 4.5rem !important;
}

.px-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
}

.py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}



.mt-6 {
    margin-top: 4.5rem !important;
}

.mb-6 {
    margin-bottom: 4.5rem !important;
}

.mx-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
}

.my-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
}

.ms-6 {
    margin-left: 4.5rem !important;
}

.me-6 {
    margin-right: 4.5rem !important;
}


.pt-7 {
    padding-top: 6rem !important;
}

.pb-7 {
    padding-bottom: 6rem !important;
}

.ps-7 {
    padding-left: 6rem !important;
}

.pe-7 {
    padding-right: 6rem !important;
}

.px-7 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.py-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}



.mt-7 {
    margin-top: 6rem !important;
}

.mb-7 {
    margin-bottom: 6rem !important;
}

.mx-7 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}

.my-7 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.ms-7 {
    margin-left: 6rem !important;
}

.me-7 {
    margin-right: 6rem !important;
}

/* Safe Area Utilities */
.m-safe {
    margin-top: env(safe-area-inset-top);
    margin-right: env(safe-area-inset-right);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
}

.mx-safe {
    margin-right: env(safe-area-inset-right);
    margin-left: env(safe-area-inset-left);
}

.my-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}

.ms-safe {
    margin-inline-start: env(safe-area-inset-left);
}

.me-safe {
    margin-inline-end: env(safe-area-inset-right);
}

.mt-safe {
    margin-top: env(safe-area-inset-top);
}

.mr-safe {
    margin-right: env(safe-area-inset-right);
}

.mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
}

.ml-safe {
    margin-left: env(safe-area-inset-left);
}

.p-safe {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

.px-safe {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}

.py-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.ps-safe {
    padding-inline-start: env(safe-area-inset-left);
}

.pe-safe {
    padding-inline-end: env(safe-area-inset-right);
}

.pt-safe {
    padding-top: env(safe-area-inset-top);
}

.pr-safe {
    padding-right: env(safe-area-inset-right);
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

.pl-safe {
    padding-left: env(safe-area-inset-left);
}

.text-white a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}

.text-black a {
    --bs-text-opacity: 1;
    color: #000000;
}

/* Simple image gallery */

.image-columns {
    column-count: 3; /* Adjust number of columns */
    column-gap: 1rem;
}

    .image-columns figure {
        width: 100%; /* Ensures image fits column width */
        margin-bottom: 1rem;
        display: block;
    }

    .image-columns .card {
        overflow: hidden;
    }

    /*Hover effect for img */
    .image-columns img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }


    .image-columns img:hover {
        transform: scale(1.05); /* Slight zoom on hover */
    }


@media (max-width: 768px) {
    .image-columns {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .image-columns {
        column-count: 1;
    }
}

a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb),var(--bs-text-opacity));
}

/* A few classes cloned from the Soft UI Design System 3 - v1.1.0 */

.btn-close:focus {
    box-shadow: none
}

.alert-dismissible .btn-close {
    background-image: none
}

.oblique {
    transform: skewX(-10deg);
    overflow: hidden;
    width: 60%;
    right: -10rem;
    border-bottom-left-radius: .75rem
}

    .oblique .oblique-image {
        transform: skewX(10deg)
    }

.footer .nav-link {
    font-weight: 400;
    font-size: .875rem;
    padding-top: 0;
    padding-bottom: .25rem
}

.footer .nav-link:hover {
    opacity: 1 !important;
    transition: opacity .3 ease
}

.text-shadow-none {
    text-shadow: none;
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.1)
}

.text-shadow-lg {
    text-shadow: 0 2px 4px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.15)
}


.glass {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    /*border-radius: 2rem;*/
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

    .glass::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: inherit;
        backdrop-filter: blur(1px);
        box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1), inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
        opacity: 0.6;
        z-index: -1;
        filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
    }

.blur {
    /*box-shadow: inset 0 0 2px hsla(0,0%,100%,.8196078431);*/
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
/*    background-color: hsla(0,0%,100%,.8) !important*/
}

    .blur.blur-desaturate {
        -webkit-backdrop-filter: saturate(20%) blur(30px);
        backdrop-filter: saturate(20%) blur(30px)
    }

    .blur.blur-rounded {
        border-radius: 40px
    }

    .blur.blur-light {
        background-color: hsla(0,0%,100%,.8)
    }

    .blur.blur-dark {
        background-color: rgba(0,0,0,.3)
    }

.shadow-blur {
    box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05) !important
}

.shadow-card {
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important
}

.navbar-blur {
    background-color: hsla(0,0%,100%,.58) !important
}

.blur-section, .navbar-blur {
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px)
}

    .blur-section.blur-gradient-primary {
        background-image: linear-gradient(310deg,rgba(234,88,12,.95),rgba(250,204,21,.95))
    }



.gradient-animation {
    background: linear-gradient(-45deg,#0ea5e9,#ef4444,#eab308,#ea580c,#27272a);
    background-size: 400% 400% !important;
    animation: gradient 10s ease infinite
}

hr {
    border-top: none !important;
    height: 1px
}

    hr.vertical {
        position: absolute;
        background-color: transparent;
        height: 100%;
        right: 0;
        top: 0;
        width: 1px
    }

        hr.vertical.light {
            background-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff,hsla(0,0%,100%,0))
        }

        hr.vertical.dark {
            background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.4),transparent)
        }

        hr.vertical.gray-light {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)
        }

    hr.horizontal {
        background-color: transparent
    }

        hr.horizontal.light {
            background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#fff,hsla(0,0%,100%,0))
        }

        hr.horizontal.dark {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent)
        }

        hr.horizontal.gray-light {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)
        }

.lock-size {
    width: 1.7rem;
    height: 1.7rem
}

.border-radius-xs {
    border-radius: .125rem
}

.border-radius-sm {
    border-radius: .25rem
}

.border-radius-md {
    border-radius: .5rem
}

.border-radius-lg {
    border-radius: .75rem
}

.border-radius-xl {
    border-radius: 1rem
}

.border-radius-2xl {
    border-radius: 1.5rem
}

.border-radius-section {
    border-radius: 10rem
}

.border-bottom-end-radius-0 {
    border-bottom-right-radius: 0
}

.border-top-end-radius-0 {
    border-top-right-radius: 0
}

.border-bottom-start-radius-0 {
    border-bottom-left-radius: 0
}

.border-top-start-radius-0 {
    border-top-left-radius: 0
}

.border-dashed {
    border-style: dashed
}

.z-index-sticky {
    z-index: 1020
}

.waves {
    position: relative;
    width: 100%;
    height: 16vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px
}

    .waves.waves-sm {
        height: 50px;
        min-height: 50px
    }

    .waves.no-animation .moving-waves > use {
        animation: none
    }

.wave-rotate {
    transform: rotate(180deg)
}

.moving-waves > use {
    animation: f 40s cubic-bezier(.55,.5,.45,.5) infinite
}

    .moving-waves > use:first-child {
        animation-delay: -2s;
        animation-duration: 11s
    }

    .moving-waves > use:nth-child(2) {
        animation-delay: -4s;
        animation-duration: 13s
    }

    .moving-waves > use:nth-child(3) {
        animation-delay: -3s;
        animation-duration: 15s
    }

    .moving-waves > use:nth-child(4) {
        animation-delay: -4s;
        animation-duration: 20s
    }

    .moving-waves > use:nth-child(5) {
        animation-delay: -4s;
        animation-duration: 25s
    }

    .moving-waves > use:nth-child(6) {
        animation-delay: -3s;
        animation-duration: 30s
    }

@keyframes f {
    0% {
        transform: translate3d(-90px,0,0)
    }

    to {
        transform: translate3d(85px,0,0)
    }
}

@media (max-width:767.98px) {
    .waves {
        height: 40px;
        min-height: 40px
    }
}

.overflow-visible {
    overflow: visible !important
}

.bg-cover {
    background-size: cover
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-y-hidden {
    overflow-y: hidden
}

.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-y-scroll {
    overflow-y: scroll
}

.mask {
    position: absolute;
    background-size: cover;
    background-position: 50%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8
}

.cursor-pointer {
    cursor: pointer
}

.transform-translate-50 {
    transform: translateY(-50%)
}


.tilt {
    transform-style: preserve-3d
}

    .tilt .up {
        transform: translateZ(50px) scale(.7) !important;
        transition: all .5s
    }

.text-sm {
    line-height: 1.5
}

.text-xs {
    line-height: 1.25
}

.lead {
    font-size: 1.25rem
}

.text-lg {
    font-size: 1.125rem !important
}

.text-sm {
    font-size: .875rem !important
}

.text-xs {
    font-size: .75rem !important
}

.text-xxs {
    font-size: .65rem !important
}

.text-sans-serif {
    font-family: Inter !important
}

.text-monospace {
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important
}

.text-justify {
    text-align: justify !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.font-weight-light {
    font-weight: 300 !important
}

.font-weight-lighter {
    font-weight: lighter !important
}

.font-weight-normal {
    font-weight: 400 !important
}

.font-weight-bold {
    font-weight: 600 !important
}

.font-weight-bolder {
    font-weight: 700 !important
}

.font-italic {
    font-style: italic !important
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1
}

.blockquote {
    border-left: 3px solid #52525b
}

    .blockquote > span {
        font-style: italic
    }


.text-black-50 {
    color: rgba(0,0,0,.5) !important
}

.text-white-50 {
    color: hsla(0,0%,100%,.5) !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-break {
    word-wrap: break-word !important
}

.text-reset {
    color: inherit !important
}

.letter-wider {
    letter-spacing: .05rem
}

.letter-normal {
    letter-spacing: 0
}

.letter-tighter {
    letter-spacing: -.05rem
}

.text-lighter {
    font-weight: lighter
}

.text-light {
    font-weight: 300
}

.text-normal {
    font-weight: 400
}

.text-bold {
    font-weight: 600
}

.text-bolder {
    font-weight: 700
}

.text-2xl {
    font-size: 1.5rem
}

.text-3xl {
    font-size: 1.875rem
}

.text-4xl {
    font-size: 2rem
}

.text-5xl {
    font-size: 2.25rem
}

.text-6xl {
    font-size: 3rem
}

.text-7xl {
    font-size: 3.75rem
}

.text-8xl {
    font-size: 4rem
}

.text-9xl {
    font-size: 5rem
}

/* Background image position modes */

/* Fixed: background stays in place while content scrolls over it */
.bg-image-fixed {
    background-attachment: fixed;
}

/* Disable fixed attachment on touch devices where it causes rendering issues */
@media (hover: none) {
    .bg-image-fixed {
        background-attachment: scroll;
    }
}

/* Parallax: background scrolls slower than content using scroll-driven animation.
   Uses ::after so it doesn't conflict with the overlay ::before pseudo-element.
   The parent defines a named view-timeline, and the ::after references it for
   reliable tracking even though it is absolutely positioned.
   Falls back to a static background in browsers without scroll-driven animation support (Safari). */
.bg-image-parallax {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Ensures ::after with negative z-index stays within this element */
}

@supports (animation-timeline: view()) {
    /* Hide the inline background-image; the animated ::after takes over */
    .bg-image-parallax {
        background-image: none !important;
        view-timeline-name: --parallax;
        view-timeline-axis: block;
    }

    .bg-image-parallax::after {
        content: '';
        position: absolute;
        top: -15%;
        left: 0;
        width: 100%;
        height: 130%;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        z-index: -2; /* Behind overlay ::before (-1) and content */
        pointer-events: none;
        animation-name: parallax-scroll;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-duration: auto; /* Let the scroll timeline control duration (shorthand defaults to 0s) */
        animation-timeline: --parallax;
    }
}

/* ==========================================================================
   Carousel block: caption on a scrim
   ==========================================================================
   Bootstrap's .carousel-caption is light text on the photo, but the theme's
   heading colour wins on the h2/h3 inside it, so a light photo (snow) got dark,
   unreadable text. Keep the caption light in both themes on a dark scrim:
   Bootstrap's dark theme sets --bs-carousel-caption-color to black, so the
   variable is not used here.
   ========================================================================== */
.block-carousel .carousel-caption {
    color: var(--bs-white);
    background-color: rgba(var(--bs-black-rgb), .5);
    border-radius: var(--bs-border-radius-lg);
    padding-left: 1rem;
    padding-right: 1rem;
}

    .block-carousel .carousel-caption :is(h1, h2, h3, h4, h5, h6, p) {
        color: inherit;
    }

    .block-carousel .carousel-caption > :last-child {
        margin-bottom: 0;
    }

/* ==========================================================================
   Swipeable (Splide) block: image position + content alignment
   ==========================================================================
   Each slide is a `.swipable-layout-*` container whose layout depends on the
   "Image position" setting (Swipeable.ImagePosition): background (default,
   image absolutely positioned full-bleed behind the text), above (stacked
   column), left/right (side-by-side flex row, image full-bleed to its own
   edge of the slide). The "Content position" setting (Swipeable.SlideContentPosition)
   controls vertical alignment of the text block and works consistently across
   all four layouts via the shared .swipable-align-* classes below.
   ========================================================================== */

/* Background mode (default): image is absolutely positioned behind the text overlay */
.swipable-layout-background {
    position: relative;
}

/* A slide without an image or video would show white text on nothing: give it a backdrop */
.swipable-layout-background:not(:has(.swipable-bg)) {
    min-height: 16rem;
    background: linear-gradient(135deg, var(--bs-primary, #2a5b99), var(--bs-dark, #212529));
}

    .swipable-layout-background .swipable-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swipable-layout-background .swipable-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

/* Above mode: image stacked on top of the text, both in normal document flow */
.swipable-layout-above {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .swipable-layout-above .swipable-bg {
        width: 100%;
        height: 50%;
        object-fit: cover;
        flex: 0 0 auto;
    }

    .swipable-layout-above .swipable-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

/* Left/right modes: image and text side by side, image full-bleed to its own edge */
.swipable-layout-left,
.swipable-layout-right {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.swipable-layout-right {
    flex-direction: row-reverse;
}

.swipable-layout-left .swipable-bg,
.swipable-layout-right .swipable-bg {
    width: 40%;
    height: 100%;
    object-fit: cover;
    flex: 0 0 40%;
}

.swipable-layout-left .swipable-content,
.swipable-layout-right .swipable-content {
    display: flex;
    flex: 1 1 60%;
    flex-direction: column;
    min-height: 0;
}

/* Content position: vertical alignment of the text block, works in every layout mode */
.swipable-align-top {
    justify-content: flex-start;
}

.swipable-align-center {
    justify-content: center;
}

.swipable-align-bottom {
    justify-content: flex-end;
}

/* Keep every slide the same fixed size regardless of content length: the
   outer link/card fills the slide's width (set by Splide's PerPage), and long
   titles/teasers are clamped with an ellipsis instead of growing the card. */
.splide__slide > a {
    display: block;
    height: 100%;
}

.swipable-layout-background,
.swipable-layout-above,
.swipable-layout-left,
.swipable-layout-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swipable-content h1,
.swipable-content h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.swipable-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Swipeable arrows (default style for every slider block: Swipeable, Item List, File List,
   related posts and product swipers): round frosted-glass buttons with a primary-coloured
   chevron that fill with the primary colour on hover (the look first made for storveis.com).
   Theme-aware via Bootstrap variables. Splide disables the back arrow on the first slide
   (unless rewind/loop is on), so it fades out there and comes back once you move on. */
:is(.block, .product-swiper) .splide__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    box-shadow: 0 6px 18px rgba(var(--bs-black-rgb), .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: .92;
    transition: background-color .2s ease, border-color .2s ease, opacity .3s ease, visibility .3s ease;
}

    :is(.block, .product-swiper) .splide__arrow svg {
        width: 1rem;
        height: 1rem;
        fill: var(--bs-primary);
        transition: fill .2s ease;
    }

    :is(.block, .product-swiper) .splide__arrow:hover:not(:disabled) {
        opacity: 1;
        background: var(--bs-primary);
        border-color: var(--bs-primary);
    }

        :is(.block, .product-swiper) .splide__arrow:hover:not(:disabled) svg {
            fill: var(--bs-body-bg);
        }

    :is(.block, .product-swiper) .splide__arrow:disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    :is(.block, .product-swiper) .splide__arrow:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--bs-primary) 50%, transparent);
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    :is(.block, .product-swiper) .splide__arrow,
    :is(.block, .product-swiper) .splide__arrow svg {
        transition: none;
    }
}

/* Sliders with data-arrows-on: Splide.Blazor.js measures the first visible slide's image and sets
   --splide-arrow-top, so the arrows sit on the middle of the images instead of the whole card */
.splide[data-arrows-on] .splide__arrow {
    top: var(--splide-arrow-top, 50%);
}

/* Newsletter archive, accordion layout: native <details> styled as a Bootstrap accordion, so it opens
   without a script (also on static pages). Bootstrap shows .accordion-button as open unless it has
   .collapsed, so a closed <details> borrows the collapsed look. */
.block-newsletter-archive-accordion summary {
    list-style: none;
    cursor: pointer;
}

    .block-newsletter-archive-accordion summary::-webkit-details-marker {
        display: none;
    }

.block-newsletter-archive-accordion details:not([open]) > summary .accordion-button {
    color: var(--bs-accordion-btn-color);
    background-color: var(--bs-accordion-btn-bg);
    box-shadow: none;
}

    .block-newsletter-archive-accordion details:not([open]) > summary .accordion-button::after {
        background-image: var(--bs-accordion-btn-icon);
        transform: none;
    }

/* The newsletter's own blocks keep their email widths inside the page */
.block-newsletter-archive-content {
    max-width: 900px;
}

@keyframes parallax-scroll {
    from { transform: translateY(-10%); }
    to { transform: translateY(10%); }
}

/* Background video: fills the section behind content */
.has-background-video {
    position: relative;
    overflow: hidden;
}

.has-background-video > .background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.has-background-video > .container,
.has-background-video > .container-fluid {
    position: relative;
    z-index: 1;
}

/* ===== Image Accordion (Apple-style) ===== */

/* Two-column layout on desktop */
.image-accordion {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 992px) {
    .image-accordion {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }

    .image-accordion-items {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .image-accordion-display {
        flex: 1 1 55%;
        position: sticky;
        top: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }
}

/* Accordion item styling */
.image-accordion-item {
    cursor: pointer;
}

.image-accordion-item + .image-accordion-item {
    border-top: 1px solid rgba(128, 128, 128, .25);
}

.image-accordion-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
}

.image-accordion-item-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    transition: color .3s ease;
}

.image-accordion-item.active .image-accordion-item-title {
    color: var(--bs-primary, #0d6efd);
}

/* Chevron indicator */
.image-accordion-chevron {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.image-accordion-item.active .image-accordion-chevron {
    transform: rotate(-135deg);
}

/* Collapsible body with smooth animation */
.image-accordion-item-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
    padding: 0 0;
}

.image-accordion-item-body.expanded {
    max-height: 800px;
    opacity: 1;
    padding-bottom: 1.5rem;
}

.image-accordion-item-teaser {
    margin: 0 0 .75rem;
    line-height: 1.6;
}

.image-accordion-item-text {
    margin-bottom: .75rem;
    line-height: 1.6;
}

.image-accordion-pretitle {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
    opacity: .7;
}

/* Link button inside item */
.image-accordion-link {
    display: inline-block;
    margin-top: .5rem;
    font-weight: 600;
    text-decoration: none;
}

.image-accordion-link:hover {
    text-decoration: underline;
}

/* Mobile inline image */
.image-accordion-inline-image {
    margin: 1rem 0 0;
}

.image-accordion-inline-image img {
    border-radius: .75rem;
    width: 100%;
    height: auto;
}

/* Desktop image display panel — crossfade between images */
.image-accordion-display {
    position: relative;
    overflow: hidden;
    /*border-radius: 1rem;*/
}

.image-accordion-display-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /*border-radius: 1rem;*/
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.image-accordion-display-img.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Transparent/overlay header for hero-style first blocks
   ==========================================================================
   A page can opt in (Item.TransparentHeaderKey / "TransparentHeader") to having its first
   content block's background stretch behind the site header. Two classes cooperate:

   - .stretch-behind-header (on the block's outer section, see PageBase.SectionClasses) and
     .block-html-content.behind-header (an HTML block, whose own markup holds the background):
     the overlay header is out of the document flow, so the block's background starts at y = 0
     behind it. The innermost container of the block (for an HTML block: of its first element)
     gets a spacer of --header-height on top, so the content (pre-title, title, buttons) starts
     below the header while the background still reaches full-bleed behind it. The spacer adds
     to the block's own padding (py-5 etc.) instead of replacing it.
     Flex containers are left out: the spacer would become a flex item beside the content (it pushed
     scrollytelling scene text sideways), and scrolly scenes are full-screen and vertically centred anyway.
   - .overlay-header (on the header wrapper, see SiteHeader.BuildHeaderCssClass): renders the
     header without its usual solid background so the hero background shows through.

   --header-height is a rough estimate of the header's rendered height. Blazor has no cheap way
   to measure the real DOM height without JS interop, so this is a sensible fixed default that
   can be overridden per-theme/site via a CSS custom property if needed.
   ========================================================================== */
:root {
    --header-height: 90px;
}

/* A top bar inside a transparent header (SiteHeader, Layout.TopBarHtml) makes it taller; a rough estimate of one line */
body:has(.overlay-header .site-top-bar) {
    --header-height: calc(90px + 2.25rem);
}

.stretch-behind-header {
    position: relative;
    z-index: 0;
}

.stretch-behind-header :is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl):not(:has(:is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl))):not(.block-scrolly-content, .d-flex)::before,
.block-html-content.behind-header > :first-child :is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl):not(:has(:is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl)))::before,
.block-html-content.behind-header > :is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl):first-child:not(:has(:is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl)))::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-height);
}

.main-header.overlay-header {
    /* Overlay mode always removes the header from normal document flow so the hero block below
       it can start at y = 0 (position: sticky would still reserve its normal-flow placeholder
       space and push the hero down). By default (no "Sticky Header" site setting) we use
       position: absolute, which is anchored to the page and scrolls away naturally with the
       rest of the content — matching non-sticky behavior. When "Sticky Header" IS enabled
       (.sticky-top also present), the more specific rule below switches to position: fixed so
       the header stays pinned to the viewport while scrolling. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    /* No !important here: the scroll-driven animation below animates background-color, and CSS
       animations cannot override !important declarations, which previously kept the header
       transparent forever even once "solidified". */
    background-color: transparent;
    transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.main-header.overlay-header.sticky-top {
    /* "Sticky Header" is enabled together with the stretch/overlay option: pin the header to the
       viewport on scroll using fixed (sticky would reserve flow space and push the hero down). */
    position: fixed;
}

/* Chromium supports scroll-driven CSS animations, so we can go fully transparent-until-scrolled
   with a smooth transition to the normal solid background as soon as the page starts scrolling —
   no JS scroll listener required. */
@supports (animation-timeline: scroll()) {
    @keyframes overlay-header-solidify {
        from {
            background-color: transparent;
            backdrop-filter: none;
            box-shadow: none;
        }

        to {
            background-color: #00000099;
            /*background-color: var(--bs-body-bg, #fff);*/
            backdrop-filter: blur(6px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        }
    }

    /* Only sticky overlay headers need the scroll-driven solidify transition: a non-sticky
       overlay header scrolls away with the rest of the page, so it should stay fully
       transparent throughout instead of gaining a background as the user scrolls. */
    .main-header.overlay-header.sticky-top {
        animation: overlay-header-solidify linear both;
        animation-timeline: scroll(root);
        animation-range: 0 220px;
    }
}

/* Fallback for browsers without scroll-driven animation support (e.g. Firefox, Safari at time of
   writing): we cannot track scroll position with CSS alone there, so instead of a hard transparent
   header we use a subtly translucent, blurred background from the start. This keeps text/menu
   items readable over any hero background while still feeling "light" over the image. */
@supports not (animation-timeline: scroll()) {
    /* Same reasoning as above: only sticky overlay headers need a readable background as the
       page scrolls beneath them, since non-sticky ones scroll away with the hero content. */
    .main-header.overlay-header.sticky-top {
        background-color: rgba(255, 255, 255, .55);
        backdrop-filter: blur(8px);
    }
}

.admin-icon {
    opacity: .5;
    transition: opacity 0.3s ease;
    float: left;
    padding: 1.1rem 0 0 1.1rem;
    cursor: pointer;
}

    .admin-icon:hover {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

/* Mobile: there is no top-left corner to spare, so the admin icon becomes a small tab on the right
   edge, vertically centered. The component positions itself inline (absolute, top-left), hence the overrides. */
@media (max-width: 768px) {
    .admin-icon {
        position: fixed !important;
        top: 50% !important;
        left: auto !important;
        right: 0;
        transform: translateY(-50%);
        float: none;
        padding: .55rem .5rem .55rem .65rem;
        line-height: 0;
        opacity: .85;
        background: rgb(255 255 255 / 85%);
        border: 1px solid rgb(0 0 0 / 8%);
        border-right: 0;
        border-radius: 12px 0 0 12px;
        box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
        backdrop-filter: blur(6px);
    }
}

/* Fix dialog positioning to prevent bouncing when content changes size */
/*fluent-dialog::part(control) {
    position: absolute;
    top: 15%;
}*/
/* Top bar above the header (SiteHeader, Layout.TopBarHtml): links and icons take the bar's text colour */
.site-top-bar a {
    color: inherit;
    text-decoration: underline;
}

.site-top-bar :is(svg, .bi) {
    vertical-align: -0.125em;
}

/* Login gate / access denied on protected pages (Default.razor): content centred vertically in the
   space below the header. The header height isn't known in CSS, so the area fills most of the viewport
   and the gate sits in the middle of it, with a little padding when the screen is short. */
.access-gate-page {
    min-height: 70svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2rem;
}

/* Access denied: keep the button its own width instead of stretching across the column */
.access-gate-page.text-center {
    align-items: center;
}

/* Shop category title line, sort menu and search/filter panel (Page.Category.razor). Every rule is one class, so a
   site's own rule for the same class (custom CSS in dynamic.min.css, which loads after this file) always wins;
   states (.is-open, .has-active, .is-selected) and :hover only add to that through :where(), never in specificity.
   Hooks: .shop-title-row, .shop-title, .shop-actions, .shop-count, .shop-action (both icon buttons),
   .shop-sort-toggle, .shop-filter-toggle, .shop-filter-badge, .shop-sort, .shop-sort-menu, .shop-sort-heading,
   .shop-sort-option, .shop-sort-backdrop, .shop-filters, .shop-filters-inner, .shop-filter, .shop-filter-search,
   .shop-filter-search-icon, .shop-search-input, .shop-filter-price, .shop-filter-stock, .shop-filter-label,
   .shop-filter-range, .shop-filter-input, .shop-filter-sep, .shop-filter-clear. */
.shop-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

.shop-title {
    min-width: 0;
    margin-bottom: 0;
}

.shop-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.shop-count {
    margin-right: .25rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    white-space: nowrap;
}

.shop-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.shop-action:where(:hover) {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.shop-action:where(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.shop-action:where(.is-open) {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white, #fff);
}

/* A chosen sort order (other than the default) shows as a dot on the sort button */
.shop-sort-toggle:where(.has-active)::after {
    content: "";
    position: absolute;
    top: .2rem;
    right: .2rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.shop-filter-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--bs-primary);
    color: var(--bs-white, #fff);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.shop-sort {
    position: relative;
}

/* Invisible layer behind the open menu: a click anywhere else closes it */
.shop-sort-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.shop-sort-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1041;
    min-width: 15rem;
    padding: .375rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12);
    transform-origin: top right;
    animation: shop-sort-menu-in .15s ease-out;
}

@keyframes shop-sort-menu-in {
    from {
        opacity: 0;
        transform: translateY(-.25rem) scale(.98);
    }
}

.shop-sort-heading {
    padding: .375rem .75rem .25rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--bs-border-radius, .375rem);
    background: none;
    color: var(--bs-body-color);
    font-size: .9375rem;
    text-align: left;
    cursor: pointer;
}

.shop-sort-option:where(:hover, :focus-visible) {
    outline: 0;
    background: var(--bs-tertiary-bg, var(--bs-light));
}

.shop-sort-option:where(.is-selected) {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Collapsed by default: the panel animates its height open (grid rows 0fr → 1fr) */
.shop-filters {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: 0;
    transition: grid-template-rows .25s ease, opacity .2s ease, margin-bottom .25s ease;
}

.shop-filters:where(.is-open) {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-bottom: 1.25rem;
}

.shop-filters-body {
    min-height: 0;
    overflow: hidden;
}

.shop-filters-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: var(--bs-border-radius-xl, 1rem);
    background: var(--bs-tertiary-bg, var(--bs-light));
}

.shop-filter {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.shop-filter-search {
    position: relative;
    flex: 1 1 100%;
}

.shop-filter-search-icon {
    position: absolute;
    top: 50%;
    left: .9rem;
    color: var(--bs-secondary-color);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Beats Bootstrap's .form-control padding and radius (one class, later in the cascade) */
.shop-search-input {
    padding-left: 2.5rem;
    border-radius: 999px;
}

.shop-filter-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-filter-range {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.shop-filter-input {
    width: 8rem;
}

.shop-filter-sep {
    color: var(--bs-secondary-color);
}

.shop-filter-stock {
    justify-content: flex-end;
    min-height: calc(1.5em + .75rem + 2px); /* lines the switch up with the price inputs */
}

.shop-filter-stock :where(.form-check) {
    margin-bottom: 0;
}

.shop-filter-clear {
    margin-left: auto;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font-size: .875rem;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .shop-filters, .shop-action, .shop-sort-menu {
        transition: none;
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .shop-filter-price, .shop-filter-range {
        flex: 1 1 100%;
        min-width: 0;
    }

    .shop-filter-input {
        width: auto;
        min-width: 0;
        flex: 1;
    }
}