.f-collection-tabs {
    --layout-column-gap: 22px
}

@media screen and (min-width: 768px) {
    .f-collection-tabs {
        --layout-column-gap: 50px
    }
}

@media screen and (min-width: 1280px) {
    .f-collection-tabs {
        --layout-column-gap: 100px
    }
}

.f-collection-tabs .f-collection-tab__content {
    padding: var(--layout-column-gap, 0) 0 0
}

@media screen and (min-width: 1024px) {
    .f-collection-tabs .f-collection-tab__content .section__header {
        padding-bottom: 50px
    }
}

@media screen and (min-width: 1024px) {
    .f-collection-tabs--image-left .f-collection-tab__content {
        padding: 0 0 0 var(--layout-column-gap, 0)
    }
}

@media screen and (min-width: 768px) {
    .f-collection-tabs--image-right .f-collection-tab__content {
        padding: 0 var(--layout-column-gap, 0) 0 0
    }
}

.f-collection-tabs .f-button--icon {
    width: var(--btn-icon-width, 44px);
    height: var(--btn-icon-width, 44px);
    padding: 0;
    align-items: center;
    border-radius: var(--btn-border-radius, 0)
}

.f-collection-tabs .collapsible__item {
    position: relative;
    display: block;
    border-bottom: 0;
    padding: 20px 0
}

.f-collection-tabs .collapsible__item:before, .f-collection-tabs .collapsible__item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(var(--color-foreground))
}

.f-collection-tabs .collapsible__item:before {
    width: 100%;
    opacity: .2
}

.f-collection-tabs .collapsible__item:after {
    width: 0
}

.f-collection-tabs .collapsible__item.is-expanded:after {
    transition: width var(--autoplay-duration, 0) linear;
    width: 100%
}

.f-collection-tabs .collapsible__item [data-content] {
    height: auto;
    overflow: hidden;
    transition: height .35s;
    will-change: height
}

.f-collection-tabs collection-tabs[data-autoplay=false] .collapsible__item:after {
    width: 100%;
    opacity: 0;
    transition: all .3s linear
}

.f-collection-tabs collection-tabs[data-autoplay=false] .collapsible__item.is-expanded:after {
    opacity: 1
}

.f-collection-tabs .block-collection-tab:first-child .collapsible__item {
    padding-top: 0
}

.f-collection-tabs .collapsible__content-inner {
    padding: 0 50px 15px 40px
}

.f-collection-tabs .collapsible__button {
    border: 0;
    padding: 10px 50px 10px 0;
    min-height: 60px;
    display: flex
}

.f-collection-tabs .collapsible__button-icon {
    min-width: 28px;
    margin: 0 12px 0 0;
    flex-shrink: 0
}

.f-collection-tabs .collapsible__button-text {
    flex-grow: 1;
    margin: 0 !important;
    font-family: var(--font-stack-header);
    color: rgb(var(--color-heading))
}

.f-collection-tabs .collapsible__button-wrap {
    position: relative
}

.f-collection-tabs .collection-tab__link {
    --btn-icon-width: 40px;
    --btn-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-color: rgb(var(--color-border));
    flex-shrink: 0;
    z-index: 0
}

.f-collection-tabs .collection-tab__link:hover {
    background-color: rgb(var(--color-button-hover));
    border-color: rgb(var(--color-button-hover))
}

.f-collection-tab__images {
    position: relative;
    min-height: 100%;
    overflow: hidden
}

.f-collection-tab__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all .3s linear
}

.f-collection-tab__image.is-active {
    opacity: 1;
    pointer-events: auto
}

@media (hover: hover)and (pointer: fine) {
    .f-collection-tabs .collection-tab__link:after {
        display: none
    }
}