/* =========================================
   MARVELLA - Luxury Custom CSS
   ========================================= */

:root {
    --marvella-navy: #082f5f;
    --marvella-dark: #041f42;
    --marvella-blue: #11b7d8;
    --marvella-light: #8fdff0;
    --marvella-white: #ffffff;
    --marvella-soft: #f6fbfe;
    --marvella-text: #12385f;
    --marvella-border: rgba(17, 183, 216, 0.22);
    --marvella-shadow: rgba(8, 47, 95, 0.12);
}


/* =========================================
   General Store Feel
   ========================================= */

body {
    background: var(--marvella-white);
    color: var(--marvella-text);
}

a {
    transition: all 0.3s ease;
}


/* =========================================
   Product Cards
   ========================================= */

.s-product-card-entry {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--marvella-border);

    box-shadow:
        0 8px 24px var(--marvella-shadow);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.s-product-card-entry:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 38px rgba(8, 47, 95, 0.18);

    border-color: rgba(17, 183, 216, 0.45);
}


/* Product image */

.s-product-card-image {
    overflow: hidden;
}

.s-product-card-image img {
    transition: transform 0.5s ease;
}

.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.04);
}


/* Product title */

.s-product-card-content-title a,
.s-product-card-content-title {
    color: var(--marvella-navy) !important;
    font-weight: 700;
}


/* Product price */

.s-product-card-price {
    color: var(--marvella-blue) !important;
    font-weight: 800;
}


/* =========================================
   Buttons
   ========================================= */

.s-button-element:not(:disabled):not([loading]) {
    color: #fff !important;

    padding: 11px 20px;

    border-radius: 14px;

    border: 1px solid rgba(143, 223, 240, 0.65);

    background:
        linear-gradient(
            135deg,
            var(--marvella-dark) 0%,
            var(--marvella-navy) 45%,
            var(--marvella-blue) 100%
        );

    box-shadow:
        0 7px 18px rgba(8, 47, 95, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.s-button-element:not(:disabled):not([loading]):hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(8, 47, 95, 0.28);

    filter: brightness(1.05);
}


/* =========================================
   Banners
   ========================================= */

.banner--fixed img {
    border-radius: 18px;

    padding: 4px;

    background:
        linear-gradient(
            120deg,
            var(--marvella-navy),
            var(--marvella-blue),
            var(--marvella-light),
            var(--marvella-navy)
        );

    background-size: 300% 300%;

    animation: marvella-banner-border 8s ease infinite;

    box-shadow:
        0 10px 30px rgba(8, 47, 95, 0.13);
}

@keyframes marvella-banner-border {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Banner titles */

.faded-sq .banner-square .text-wrapper {
    bottom: -28px;
    top: auto;
    z-index: 2;

    --tw-translate-x: -50%;

    transform: translateX(var(--tw-translate-x));

    overflow: hidden;
}

.faded-sq .banner-square .text-wrapper h3,
.s-block--banners .banner-square h3 {
    color: var(--marvella-navy) !important;

    font-size: 16px;

    font-weight: 700;

    margin-top: .4rem;

    transition: all 0.3s ease;
}


/* =========================================
   Category Images
   ========================================= */

.lazy__bg.lazy_menu {
    position: relative;

    width: 2.8rem;

    height: 2.8rem;

    border-radius: 50%;

    overflow: hidden;

    border:
        2px solid rgba(17, 183, 216, 0.22);

    box-shadow:
        0 4px 12px rgba(8, 47, 95, 0.08);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.lazy__bg.lazy_menu:hover {
    transform: scale(1.06);

    border-color: var(--marvella-blue);
}


/* =========================================
   Headings
   ========================================= */

.s-block__title h2,
.s-block__title h3,
section h2,
section h3 {
    color: var(--marvella-navy);

    font-weight: 800;
}


/* Decorative line below titles */

.s-block__title h2::after {
    content: "";

    display: block;

    width: 55px;

    height: 3px;

    margin: 8px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--marvella-blue),
            var(--marvella-light)
        );
}


/* =========================================
   Footer
   ========================================= */

.store-footer {
    background:
        linear-gradient(
            135deg,
            var(--marvella-dark) 0%,
            var(--marvella-navy) 65%,
            #0b4b7b 100%
        );

    color: #fff;
}

.store-footer__inner {
    padding: 1.6rem;

    margin: 1rem;

    border-radius: 24px;

    border:
        1px solid rgba(143, 223, 240, 0.28);

    background:
        rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(8px);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.13);
}

.store-footer a {
    color: rgba(255,255,255,0.88);
}

.store-footer a:hover {
    color: var(--marvella-light) !important;
}


/* Footer logo */

.store-footer
.footer-container
.logo-footer
.foo {
    width: auto;

    height: 7rem !important;

    margin-bottom: .5rem;
}


/* =========================================
   Slider Navigation
   ========================================= */

.s-slider-v-centered
.s-slider-block__title-nav
button {
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            var(--marvella-dark),
            var(--marvella-navy)
        ) !important;

    color: #fff !important;

    border:
        1px solid rgba(143, 223, 240, 0.55) !important;

    transition: all 0.3s ease;
}

.s-slider-v-centered
.s-slider-block__title-nav
button:hover {
    background:
        linear-gradient(
            135deg,
            var(--marvella-navy),
            var(--marvella-blue)
        ) !important;
}


/* =========================================
   Hide slider dots
   ========================================= */

.swiper-pagination-bullet {
    display: none !important;
}


/* =========================================
   Utilities
   ========================================= */

.h-16 {
    height: 5rem;
}

.p-4 {
    padding: 0rem;
}


/* =========================================
   Desktop
   ========================================= */

@media (min-width: 768px) {

    .min--10 {
        width: 10%;

        max-width: 14%;
    }

}


/* =========================================
   Mobile
   ========================================= */

@media screen and (max-width: 600px) {

    .s-product-card-entry {
        border-radius: 16px;
    }

    .faded-sq
    .banner-square
    .text-wrapper h3 {

        color: var(--marvella-navy) !important;

        font-size: 14px;

        font-weight: 700;
    }

    .store-footer__inner {
        margin: .5rem;

        padding: 1rem;

        border-radius: 18px;
    }

    .s-button-element:not(:disabled):not([loading]) {
        border-radius: 12px;

        padding: 10px 14px;
    }

}