/**
 * This stylesheet is used to add custom styles to the Ariens theme.
 * It shall only be used by the customer to add custom styles.
 * Changes made here will not be overwritten by theme updates.
 * The changes made will be transferred to the child theme periodically.
 * Afterwards they shall be removed from this file.
 */

/* Add your custom styles here */
.single-product__gallery--slider--slide .fixed-size-bg-cover {
    object-fit: contain;
}

.header .lang-nav-container #lang-nav ul li a .lang-label {
    white-space: nowrap;
}


header .row {
    padding: 0 25px !important;
}


/* ======= accordion */

section.accordion {
    max-width: var(--sectionWidth);
    margin: 40px auto;
    width: 97%;

}

.accordion summary {
    display: block;
    cursor: pointer;
    padding: 10px;
    font-size: 22px;
    transition: .3s;
    border-bottom: 1px solid;
    user-select: none;
    color: #f18700;
}

.accordion summary .h2 {
    color: #f18700 !important;
}

.accordion p {
    width: 100%;
}

.accordion details > div {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 100%;
    user-select: none;
    padding: 0 20px;
}


.accordion details[open] > summary {

}

@media (max-width: 1px) {
    details[open] > div > p {
        opacity: 0;
        animation-name: showContent;
        animation-duration: 0.6s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
        margin: 0;
        padding-left: 20px;
    }

    details[open] > div {
        animation-name: slideDown;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }

}

@keyframes slideDown {
    from {
        opacity: 0;
        height: 0;
        padding: 0;
    }

    to {
        opacity: 1;
        height: var(--contentHeight);
        padding: 20px;
    }
}


/* ======= /accordion */