/*
Theme Name: EGA - Ignilux
Author: EGA Digital
Author URI: https://ega.digital
Version: 1.0
*/

/* global */
:root {
    --c-mapped-blue: #2d5f59;
    --c-green: #7c9592;
    --c-red: #883636;
    --c-title: #052320;
    --c-text: #3b3b3b;
    --c-white: #fff;
    --c-star: #fccd13;

    --font-sans: "Hanken Grotesk", sans-serif, emoji;
    --font-serif: "Libre Baskerville", serif, emoji;

    --transition: 0.3s ease-out;

    --container-x: 1rem;
    --container-y: 0.75rem;
    --grid-gap: 0.75rem;
    --block-space: 0.5rem;
    --element-space: 0.5rem;

    @media (min-width: 20rem) {
        --container-x: 1rem;
        --container-y: 1.25rem;
        --grid-gap: 1rem;
        --block-space: 0.75rem;
    }
    @media (min-width: 40rem) {
        --container-x: 2.5rem;
        --container-y: 1.5rem;
        --grid-gap: 1.5rem;
        --block-space: 1rem;
        --element-space: 0.75rem;
    }
    @media (min-width: 60rem) {
        --container-x: 3.75rem;
        --container-y: 2rem;
        --grid-gap: 2rem;
        --block-space: 1.5rem;
    }
    @media (min-width: 80rem) {
        --container-x: 5rem;
        --container-y: 2.5rem;
        --grid-gap: 2.5rem;
        --block-space: 2rem;
        --element-space: 1rem;
    }
}

body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background-color: var(--c-white);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
h1,
h2,
h3 {
    font-family: var(--font-serif);
    color: var(--c-title);
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
    @media (min-width: 20rem) {
        font-size: 2.185rem;
    }
    @media (min-width: 40rem) {
        font-size: 2.3125rem;
    }
    @media (min-width: 60rem) {
        font-size: 2.5rem;
    }
    @media (min-width: 80rem) {
        font-size: 2.6875rem;
    }
}

h2 {
    font-size: 1.5rem;
    margin-bottom: var(--block-space);
    &:not(.iconless)::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMzLjk4NTggNy45NzgwOUMyOS4zNzA3IDE2LjUwODUgMTguNjM1MSAxMi43NDg1IDEzLjg4NTMgNS45ODk3QzEwLjU0MSAxLjIzMDk2IDMuNDkxNTkgMy42NjE5MSAtMy44NDcxNWUtMDUgNy40MjM4OEMxLjg2NzU5IDEuMTk1ODQgMTAuMzAyMiAtMi40OTI3NSAxNS4xNzM4IDEuOTYzNDlDMjAuODU2NCA3LjE2MTM5IDI2LjMxNCAxMy43ODY5IDMzLjk4NTggNy45NzgwOVoiIGZpbGw9IiMwNTIzMjAiLz4KPHBhdGggZD0iTTI0LjQ0OTIgMTUuNTU4NUMxMS41NDcxIDIyLjQ1OTcgMTIuNDA5NiA0LjQ1NiAxLjg1MzAyIDkuMzcxMDhDMy43MjU1MSA1LjY5MzM2IDkuMDU2NDQgNC40MjEyMSAxMS45OTggNy4zNzA2M0MxNS44MTAyIDExLjE5MyAxOC4zNDcxIDE1LjQ2NjYgMjQuNDQ5MiAxNS41NTg1WiIgZmlsbD0iIzA1MjMyMCIvPgo8cGF0aCBkPSJNMTkuNDY1OCAxOS4wNjdDOS40NDIyNCAyNi4wMjI5IDcuNTk1OTMgMTIuNzE0NyAyLjI2ODk2IDEyLjQ5NDJDNS4xMTkyOSA5LjM5MTU1IDkuMzIxMDYgMTMuMTY3NyAxMS4zODk1IDE1LjU0NTRDMTMuNDA2MiAxNy44NjM3IDE2LjQxMDcgMTguNjg4MiAxOS40NjU4IDE5LjA2N1oiIGZpbGw9IiMwNTIzMjAiLz4KPHBhdGggZD0iTTExLjczNDkgMjEuOTg3MUM5LjQzMjYgMjQuMjUwOCA0LjkxMDg0IDI0LjIyMzggMy4xMzQwNCAyMS4yOTJDMi4wMzY4NSAxOS40ODE2IDEuODk4NjQgMTcuMTc3IDAuNDI0Njk0IDE1LjUzMjlDNS4yMDA0NCAxNS4wNTAyIDcuMDUxMDQgMjIuMTE3MiAxMS43MzQ5IDIxLjk4NzFaIiBmaWxsPSIjMDUyMzIwIi8+Cjwvc3ZnPgo=");
        margin-right: 0.5rem;
        width: 1.5rem;
        height: auto;
    }
    @media (min-width: 20rem) {
        font-size: 1.6875rem;
    }
    @media (min-width: 40rem) {
        font-size: 1.8125rem;
    }
    @media (min-width: 60rem) {
        font-size: 2rem;
    }
    @media (min-width: 80rem) {
        font-size: 2.1875rem;
    }
}
h3 {
    font-size: 1.25rem;
    @media (min-width: 40rem) {
        font-size: 1.375rem;
    }
    @media (min-width: 60rem) {
        font-size: 1.5rem;
    }
    @media (min-width: 80rem) {
        font-size: 1.625rem;
    }
}

img,
video {
    display: block;
    width: 100%;
    object-fit: cover;
}
/* header */
.il-header {
    background-color: color(from var(--c-mapped-blue) srgb r g b / 0.7);
    backdrop-filter: blur(0.5rem);
    z-index: 100;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    border: var(--c-mapped-blue) solid 0;
    border-top-width: 1px;
    top: auto;
    @media (min-width: 60rem) {
        position: sticky;
        top: 0;
        border-radius: 0 0 0.5rem 0.5rem;
        /* border-bottom: inherit;
    border-top: 0; */
        border-width: 1px;
        border-top-width: 0;
    }
    .main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem var(--container-x);
        .logo {
            svg {
                height: 2.5rem;
                width: auto;
                color: var(--c-title);
            }
            .horizontal {
                display: none;
            }
            @media (min-width: 40rem) {
                .horizontal {
                    display: initial;
                }
                .icon {
                    display: none;
                }
            }
        }
        .sub {
            display: flex;
            align-items: center;
            gap: 1rem;
            @media (min-width: 80rem) {
                gap: 4rem;
            }
        }
        .links {
            display: none;
            color: var(--c-title);
            font-weight: bold;
            gap: 0.75rem;
            a {
                display: block;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    inset-inline: 0;
                    bottom: 0;
                    height: 1px;
                    background-color: var(--c-title);
                    margin-inline: auto;
                    width: 0;
                    transition: width var(--transition);
                }
                &:hover::before {
                    width: 100%;
                }
            }
            @media (max-width: calc(60rem - 1px)) {
                &.open {
                    text-align: right;
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    right: 0;
                    bottom: 100%;
                    border-radius: 0.25rem 0.25rem 0 0;
                    padding: 1.5rem var(--container-x);
                    background-color: color(
                        from var(--c-mapped-blue) srgb r g b / 0.7
                    );
                    backdrop-filter: blur(0.5rem);
                    a::after {
                        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNyAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNzU0OTFlLTA4IDcuODA0NjFDMi4zMDY2MSAzLjU0MTE5IDcuNjcyMTkgNS40MjA0MSAxMC4wNDYxIDguNzk4MzlDMTEuNzE3NSAxMS4xNzY4IDE1LjI0MDggOS45NjE4IDE2Ljk4NTkgOC4wODE2QzE2LjA1MjUgMTEuMTk0MyAxMS44MzY5IDEzLjAzNzggOS40MDIwOSAxMC44MTA3QzYuNTYyMDIgOC4yMTI3OSAzLjgzNDMgNC45MDEzOSA0Ljc1NDkxZS0wOCA3LjgwNDYxWiIgZmlsbD0iIzA1MjMyMCIvPgo8cGF0aCBkPSJNNC43NjY2IDQuMDE1ODRDMTEuMjE1IDAuNTY2NjMzIDEwLjc4MzkgOS41NjQ3NiAxNi4wNiA3LjEwODI0QzE1LjEyNDIgOC45NDYzNCAxMi40NTk4IDkuNTgyMTUgMTAuOTg5NiA4LjEwODA1QzkuMDg0MjkgNi4xOTc2NCA3LjgxNjQxIDQuMDYxNzQgNC43NjY2IDQuMDE1ODRaIiBmaWxsPSIjMDUyMzIwIi8+CjxwYXRoIGQ9Ik03LjI1NzMyIDIuMjYyMTZDMTIuMjY3IC0xLjIxNDMxIDEzLjE4OTggNS40MzY5OSAxNS44NTIyIDUuNTQ3MjFDMTQuNDI3NiA3LjA5Nzg5IDEyLjMyNzYgNS4yMTA2MiAxMS4yOTM4IDQuMDIyMjZDMTAuMjg1OSAyLjg2MzYgOC43ODQyNiAyLjQ1MTQ5IDcuMjU3MzIgMi4yNjIxNloiIGZpbGw9IiMwNTIzMjAiLz4KPHBhdGggZD0iTTExLjEyMTEgMC44MDI5NDhDMTIuMjcxNyAtMC4zMjg0MTEgMTQuNTMxNyAtMC4zMTQ5NDMgMTUuNDE5NyAxLjE1MDM1QzE1Ljk2ODEgMi4wNTUxOCAxNi4wMzcyIDMuMjA3MDEgMTYuNzczOCA0LjAyODdDMTQuMzg2OSA0LjI2OTk4IDEzLjQ2MiAwLjczNzkxNiAxMS4xMjExIDAuODAyOTQ4WiIgZmlsbD0iIzA1MjMyMCIvPgo8L3N2Zz4K");
                        margin-left: 0.5rem;
                    }
                }
            }
            @media (min-width: 60rem) {
                display: flex;
                align-items: center;
                a {
                    padding-block: 0.5rem;
                }
                @media (min-width: 80rem) {
                    gap: 1rem;
                }
            }
        }
        .icons {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            @media (min-width: 80rem) {
                gap: 1rem;
            }
        }
        .dropdown {
            position: relative;
            .sub-links {
                opacity: 0;
                scale: 0;
                border-radius: 0.25rem;
                /* pointer-events: none; */
                position: absolute;
                top: 50%;
                right: 100%;
                translate: 0 -50%;
                width: max-content;
                padding: 0.5rem 1rem;
                background-color: color(
                    from var(--c-mapped-blue) srgb r g b / 0.7
                );
                backdrop-filter: blur(0.5rem);
                transition:
                    opacity var(--transition),
                    scale var(--transition);
                transition-delay: 250ms;

                transform-origin: right center;
                @media (min-width: 60rem) {
                    text-align: center;
                    top: 100%;
                    left: 50%;
                    translate: -50%;
                    transform-origin: top center;
                }
            }
            &:hover .sub-links,
            &:focus-within .sub-links {
                scale: 1;
                opacity: 1;
                /* pointer-events: unset; */
                transition-delay: 0ms;
            }
        }
    }

    @media (min-width: 60rem) {
        .hamburger {
            display: none;
        }
    }
}

/* overfooter */
.overfooter {
    background-color: var(--c-green);
    color: var(--c-title);
    text-align: center;
    .element {
        font-weight: bold;
        svg {
            width: 4rem;
            margin-inline: auto;
        }
        @media (min-width: 40rem) {
            grid-column: span 6 / span 6;
        }
        @media (min-width: 60rem) {
            grid-column: span 3 / span 3;
        }
    }
}
/* footer */
.il-footer {
    background-color: var(--c-text);
    color: var(--c-white);
    row-gap: calc(2 * var(--grid-gap));
    &.il-section {
        padding-bottom: 4.5rem;
    }
    a {
        transition: color var(--transition);
    }
    a:hover {
        color: var(--c-green);
    }
    .logo {
        .payments {
            margin-top: 1rem;
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            svg {
                width: 2rem;
            }
        }
        a svg {
            max-width: 12rem;
            margin-inline: auto;
        }
    }
    .social {
        a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
    }
    .legal {
        text-align: right;
    }
    .logo,
    .social,
    .plan {
        text-align: center;
    }
    h2 {
        color: var(--c-white);
        margin-bottom: 0.75em;
        font-size: 1.25rem;
        @media (min-width: 40rem) {
            font-size: 1.375rem;
        }
        @media (min-width: 60rem) {
            font-size: 1.5rem;
        }
        @media (min-width: 80rem) {
            font-size: 1.625rem;
        }
    }
    @media (min-width: 40rem) {
        .logo,
        .social,
        .plan {
            text-align: unset;
        }
        .logo {
            grid-column: span 4 / span 4;
            a svg {
                margin-inline: unset;
            }
        }
        .plan {
            grid-column: span 4 / span 4;
        }
        .social {
            grid-column: span 4 / span 4;
        }
    }
    @media (min-width: 60rem) {
        &.il-section {
            padding-bottom: var(--container-y);
        }
        .logo {
            grid-column: span 4 / span 4;
            .payments {
                justify-content: flex-start;
            }
        }
        .plan {
            grid-column: span 3 / span 3;
        }
        .social {
            grid-column: span 3 / span 3;
        }
    }
    @media (min-width: 80rem) {
        .logo {
            grid-column: span 3 / span 3;
        }
        .plan {
            grid-column: span 2 / span 2;
        }
        .social {
            grid-column: span 2 / span 2;
        }
    }
}
/* element */
.il-button {
    border-radius: 99rem;
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--c-mapped-blue);
    color: var(--c-white);
    width: fit-content;
    transition:
        background-color var(--transition),
        color var(--transition);
    border: 1px solid var(--c-mapped-blue);
    &:hover {
        background-color: var(--c-green);
        color: var(--c-title);
    }
    &.icon {
        padding: 0.5rem;
    }
}

.il-section {
    padding: var(--container-y) var(--container-x);
}

.il-image {
    border-radius: 0.25rem 1rem 0.25rem 1rem;
}
.il-4\/3 {
    aspect-ratio: 4 / 3;
}

.il-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
    & > * {
        grid-column: 1 / -1;
    }
}

.il-product-grid {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: var(--grid-gap);
}
.il-product-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    grid-column: 1 / -1;
    border-radius: 0.25rem 1rem 0.25rem 1rem;
    border: var(--c-mapped-blue) 1px solid;
    background-color: var(--c-white);
    @media (min-width: 40rem) {
        grid-column: span 6 / span 6;
    }
    @media (min-width: 60rem) {
        grid-column: span 4 / span 4;
    }
    &:has(a:hover) .img img {
        scale: 1.05;
    }
    .img {
        border-radius: 0.25rem 1rem 0rem 0rem;
        overflow: hidden;
        img {
            transition: scale var(--transition);
            border-radius: inherit;
        }
    }
    .title {
        padding: 1rem;
        h3 {
            color: var(--c-mapped-blue);
        }
    }
    .infos {
        padding: 1rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    .basket {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
}
.il-price {
    font-size: 1.5rem;
    font-weight: bold;
}
.il-quantity {
    appearance: textfield;
    display: flex;
    align-items: center;
    border-radius: 99rem;
    padding-block: 0.5rem;
    font-weight: bold;
    background-color: var(--c-green);
    color: var(--c-title);
    border: 1px solid var(--c-green);
    transition: border-color var(--transition);
    input {
        text-align: center;
        appearance: textfield;
        background-color: transparent;
        /* width: 2rem; */
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }
    button {
        padding-inline: 0.25rem;
        transition: opacity var(--transition);
        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        svg {
            width: 1rem;
        }
    }
    &:focus-within {
        border-color: var(--c-mapped-blue);
    }
}

.il-space-b {
    margin-bottom: var(--block-space);
}
.il-space-t {
    margin-top: var(--block-space);
}
.il-space-l {
    margin-left: var(--block-space);
}
.il-space-r {
    margin-right: var(--block-space);
}
.il-space-x {
    margin-inline: var(--block-space);
}
.il-space-y {
    margin-block: var(--block-space);
}
.il-el-space-b {
    margin-bottom: var(--element-space);
}
.il-el-space-t {
    margin-top: var(--element-space);
}
.il-el-space-l {
    margin-left: var(--element-space);
}
.il-el-space-r {
    margin-right: var(--element-space);
}
.il-el-space-x {
    margin-inline: var(--element-space);
}
.il-el-space-y {
    margin-block: var(--element-space);
}

/* .zoomable {
  &:hover {
    scale: 1.2;
    translate: var(--mouse-x-percentage) var(--mouse-y-percentage);
  }
} */

.il-input {
    background-color: var(--c-white);
    border: 1px solid var(--c-mapped-blue);
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

.il-prose {
    * + h2 {
        margin-top: var(--block-space);
    }
    hr {
        margin-block: var(--element-space);
        max-width: 80%;
        width: 20rem;
        /* margin-inline: auto; */
    }
    ul {
        list-style: disc;
        padding-left: 1.5rem;
    }
    ol {
        list-style: decimal;
        padding-left: 1.5rem;
    }
    table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
            padding: 1rem;
            text-align: left;
        }
        th {
            font-weight: bold;
            background-color: var(--c-mapped-blue);
            color: var(--c-white);
        }
        tr {
            &:nth-child(even) {
                background-color: color(from var(--c-green) srgb r g b / 0.5);
            }
            &:nth-child(odd) {
                background-color: color(from var(--c-green) srgb r g b / 0.125);
            }
        }
    }
    @media (min-width: 80rem) {
        & > * {
            grid-column: 2 / -2;
        }
    }
}
.il-search-dialog {
    background-color: color(from var(--c-mapped-blue) srgb r g b / 0.5);
    border-radius: 0.25rem 1rem 0.25rem 1rem;
    padding: 2rem;
    border: 1px solid var(--c-mapped-blue);
    width: 40rem;
    max-width: 100%;
    height: fit-content;
    margin-top: var(--container-y);
    .search-form {
        display: flex;
        align-items: center;
        gap: 1rem;
        input {
            flex: 1;
        }
    }
    &::backdrop {
        background-color: color(from var(--c-green) srgb r g b / 0.5);
        backdrop-filter: blur(0.5rem);
    }
    .relevanssi-live-search-results {
        width: 100% !important;
    }
    .relevanssi-live-search-result-status {
        margin-top: 0.25rem;
    }
    .relevanssi-live-search-result a {
        display: block;
        margin-top: 0.25rem;
        padding: 0.5rem;
        /* background-color: color(from var(--c-mapped-blue) srgb r g b / 0.5); */
        background-color: var(--c-green);
        border: 1px solid var(--c-mapped-blue);
    }
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    bottom: 5rem;
    left: 1rem;
    @media (min-width: 60rem) {
        bottom: 1rem;
    }
}