/*=============================================================================
  CAROUSEL BLOCK

  * Used as a wrapper for Swiper carousels
=============================================================================*/

.carousel-container .swiper-carousel.is-mixed .carousel__image-wrapper img:not(.image__rod):not(.image__apparel) {
    transform: translate(0, -50%);
    top: 50%;
    position: absolute;
}

.carousel__slide-wrapper {
    position: relative;
    height: 100%;
    padding-bottom: var(--spacing-06);
    background-color: var(--color-surface-primary);
}

.carousel__slide-wrapper:not(.no-link) a:hover,
.carousel__slide-wrapper:not(.no-link) a:active,
.carousel__slide-wrapper:not(.no-link) a:focus {
    border: var(--border-weight-01) solid var(--color-border-card-hover);
    box-shadow: var(--box-shadow-black);
}

.carousel__slide-wrapper a {
    display: block;
    position: relative;
    height: 100%;
    width: calc(100% - 2px);
    left: 1px;
    top: 1px;
    padding: var(--spacing-03);
    border: var(--border-weight-01) solid var(--color-border-card-default);
    border-radius: var(--border-radius-md);
}

.carousel__slide-wrapper.is-mixed a {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel__image-wrapper {
    display: block;
    margin: 0 auto var(--spacing-04);
}

.carousel__image-wrapper a {
    display: block;
}

.carousel__image-wrapper img:not(.image__rod):not(.image__apparel) {
    display: block;
    width: 112px;
    margin: auto;
}

.carousel__image-wrapper .is-shoe {
    padding: 32.5px 0;
}

@media (min-width: 576px) {

    .carousel_wrap {
        margin: 0 18px var(--spacing-06);
    }

    .carousel_wrap-cell:last-child {
        padding: 0 18px 0 0;
    }

}

@media (min-width: 768px) {

    .carousel_wrap {
        margin: 0 var(--spacing-06) var(--spacing-06);
    }

    .carousel_wrap-cell:last-child {
        padding: 0 var(--spacing-06) 0 0;
    }

}

.has-lgcells.swiper-carousel {
    width: 1200px;
    max-width: 1200px;
    padding: 0 var(--spacing-12);
}

.has-lgcells .carousel_wrap-cell {
    padding: 0 var(--spacing-06) 0 0;
}

.has-lgcells .carousel__slide-wrapper {
    width: 258px;
    min-width: 258px;
}

.has-lgcells .carousel__image-wrapper {
    min-height: 280px;
}

.has-lgcells .carousel__image-wrapper img {
    width: 210px;
}

.has-lgcells .carousel__image-wrapper .is-shoe {
    padding: 54px 0;
}

.has-lgcells .carousel__image-wrapper {
    position: relative;
}

.has-lgcells .carousel__image-wrapper img {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
}

.carousel__info-wrapper {
    display: block;
    position: relative;
}

.carousel__info-wrapper:focus,
.carousel__info-wrapper:hover,
.carousel__info-wrapper:active {
    color: var(--color-text-primary-dark);
}

.carousel__info-wrapper:visited {
    color: var(--color-text-primary-dark);
}

.carousel__info-flag {
    font: var(--text-flag);
    padding-bottom: var(--spacing-01);
    color: var(--color-text-primary-dark);
}

.carousel__info-flag.preorder {
    color: var(--color-text-flag-preorder);
}

.carousel__info-flag.topseller {
    color: var(--color-text-flag-bestseller);
}

.carousel__info-flag.new {
    color: var(--color-text-flag-new);
}

.carousel__info-flag.sale {
    color: var(--color-text-flag-promo);
}

.carousel__info-flag.comingsoon {
    color: var(--color-text-flag-preorder);
}

.carousel__info-options {
    font: var(--text-body-xs-compact);
    color: var(--color-text-primary-dark);
    margin-bottom: var(--spacing-02);
    padding-bottom: var(--spacing-02);
    border-bottom: var(--border-weight-01) solid var(--color-border-primary);
}

.carousel__info-name {
    font: var(--text-product-name-lg);
    color: var(--color-text-primary-dark);
    word-break: break-word;
    padding-bottom: var(--spacing-01);
}

.carousel__info-subline {
    font: var(--text-product-type-lg);
    color: var(--color-text-secondary);
    word-break: break-word;
    padding-bottom: var(--spacing-01);
}

.carousel__info-price {
    font: var(--text-price-md);
    color: var(--color-text-price-primary);
    text-decoration: none;
    padding-bottom: var(--spacing-01);
}

.carousel__info-price.is-sale {
    color: var(--color-text-price-promo);
}

.carousel__pros .carousel__slide-wrapper a {
    padding: var(--spacing-03);
}

.carousel__pros .carousel__image-wrapper img {
    width: 100%;
    aspect-ratio: var(--image-pro);
}

.carousel__pros .carousel__info-name {
    font: var(--text-title-md);
}

.carousel__pros .carousel__info-subline {
    font: var(--text-body-sm-compact);
    padding-bottom: var(--spacing-01);
}

section .multi_blk-wrap.swiper-carousel {
    padding-bottom: var(--spacing-06);
}

/* Swiper Carousel */
.swiper-carousel {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

.swiper-slide {
    width: auto;
    height: auto;
}

.swiper .carousel__slide-wrapper {
    width: auto;
}

.swiper .carousel__image-wrapper {
    position: relative;
    display: block;
    margin: 0 auto;
    margin-bottom: var(--spacing-04);
}

.swiper.carousel__pros {
    padding-bottom: 1px;
}

.swiper:not(.carousel__pros) .carousel__image-wrapper img:not(.image__rod):not(.image__apparel) {
    width: 100%;
    display: block;
    margin: auto;
}

.swiper .carousel__image-wrapper.is-rod {
    aspect-ratio: var(--image-apparel);
}

.swiper .carousel__image-wrapper.is-rod img {
    aspect-ratio: var(--image-rod);
    width: auto;
    height: 100%;
}

.swiper .carousel__image-wrapper.is-apparel img {
    aspect-ratio: var(--image-apparel);
}

.swiper .carousel__image-wrapper.is-lure img {
    aspect-ratio: var(--image-bait);
}

.swiper .carousel__image-wrapper.is-hardgood img {
    aspect-ratio: var(--image-hard-good);
}

.swiper .carousel__image-wrapper.is-undefined img {
    aspect-ratio: var(--image-undefined);
}

.swiper.video .swiper-slide {
    padding-bottom: var(--spacing-06);
}

.s-controls_wrapper {
    position: relative;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin-bottom: var(--spacing-06);
}

.s-controls_wrapper .s-controls {
    height: 28px;
    width: 100%;
    position: relative;
}

.s-controls_wrapper .shop-all_wrapper {
    position: relative;
    width: auto;
    margin-left: var(--spacing-04);
    text-align: left;
    margin-top: -2px;
}

.s-controls_wrapper .shop-all_wrapper .shop-all_link {
    font: var(--text-link-md);
    color: var(--color-text-primary-dark);
    white-space: normal;
    text-decoration: underline;
}

.s-controls_wrapper .shop-all_wrapper .shop-all_link:hover,
.s-controls_wrapper .shop-all_wrapper .shop-all_link:focus,
.s-controls_wrapper .shop-all_wrapper .shop-all_link:active {
    text-decoration: none;
    color: var(--color-text-link-hover);
}

.swiper-button-prev,
.swiper-button-next {
    background-color: var(--color-surface-primary);
    border: var(--border-weight-01) solid var(--color-border-primary);
    padding: var(--spacing-03);
    border-radius: var(--border-radius-sm);
    top: 6px;
    display: none;
}

.swiper-button-prev:not(.swiper-button-disabled):hover,
.swiper-button-next:not(.swiper-button-disabled):hover {
    background-color: var(--color-surface-primary-inverse);
    border: var(--border-weight-01) solid var(--color-brand-secondary-01);
    color: var(--color-brand-text-on-secondary);
    transition: 0.3s;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: 100%;
}

.swiper.article {
    margin-bottom: 0;
}

.swiper.is-sm .carousel__info-wrapper {
    padding: 0 var(--spacing-04) var(--spacing-04);
}

.product-info .swiper-carousel {
    padding: 0;
}

.product-info__section .swiper {
    padding-bottom: var(--spacing-06);
}

@media (min-width: 768px) {

    .s-controls_wrapper .shop-all_wrapper .shop-all_link {
        white-space: nowrap;
    }

}

@media (min-width: 992px) {

    .swiper-button-prev,
    .swiper-button-next {
        display: flex;
    }

    .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
        width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%));
    }

    :root {
        --swiper-scrollbar-sides-offset: 40px;
    }

}


/* ======================================================================
LEGACY CAROUSEL

We need to keep this to support older versions of the carousel that are
being used in areas like the learning center, email builder, etc.
====================================================================== */

.carousel_wrap {
    overflow: hidden;
}

.profile_wrap {
    display: block;
    height: 100%;
    padding: var(--spacing-04);
    text-decoration: none;
}

.profile_wrap {
    padding-bottom: var(--spacing-06);
}

.product_carousel {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: scroll;
    overflow: auto;
    overflow-x: auto;
    padding-bottom: var(--spacing-04);
}

.product_carousel::-webkit-scrollbar {
    display: none;
}

.sw-listcarousel {
    position: relative;
}

.sw-listcarousel-inner-wrap {
    display: block;
    position: relative;
    overflow: hidden;
}

.sw-listcarousel-inner {
    position: relative;
    height: 100%;
}

.sw-listcarousel-arrow-box {
    position: absolute;
    top: var(--spacing-06);
    height: calc(100% - 24px);
    width: 66px;
    cursor: pointer;
    background: var(--color-surface-primary);
    user-select: none;
}

.sw-listcarousel-left-arrow {
    left: -66px;
}

.sw-listcarousel-right-arrow {
    right: -66px;
}

.sw-listcarousel-arrow-icon {
    position: absolute;
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/icons/arrows.svg');
    background-size: 32px 384px;
    height: 32px;
    width: 32px;
    top: 50%;
    margin-top: -16px;
    right: var(--spacing-04);
}

.sw-listcarousel-left-arrow .sw-listcarousel-arrow-icon {
    background-position: 0 -192px;
}

.sw-listcarousel-right-arrow .sw-listcarousel-arrow-icon {
    background-position: 0 -224px;
}

.sw-listcarousel-left-arrow:hover .sw-listcarousel-arrow-icon,
.sw-listcarousel-left-arrow:focus .sw-listcarousel-arrow-icon {
    background-position: 0 -64px;
}

.sw-listcarousel-right-arrow:hover .sw-listcarousel-arrow-icon,
.sw-listcarousel-right-arrow:focus .sw-listcarousel-arrow-icon {
    background-position: 0 -96px;
}

.has-lgcells .sw-listcarousel-arrow-box {
    width: var(--spacing-12);
}

.has-lgcells .sw-listcarousel-left-arrow {
    left: var(--spacing-12-negative);
}

.has-lgcells .sw-listcarousel-right-arrow {
    right: var(--spacing-12-negative);
}

.has-lgcells .sw-listcarousel-right-arrow .sw-listcarousel-arrow-icon {
    right: 0;
}

.sw-listcarousel {
    position: relative;
}

.sw-listcarousel-inner-wrap {
    display: block;
    position: relative;
    overflow: hidden;
}

.sw-listcarousel-inner {
    position: relative;
    height: 100%;
}

.sw-listcarousel-arrow-box {
    position: absolute;
    top: var(--spacing-06);
    height: calc(100% - 24px);
    width: 66px;
    cursor: pointer;
    background: var(--color-surface-primary);
    user-select: none;
}

.sw-listcarousel-left-arrow {
    left: -66px;
}

.sw-listcarousel-right-arrow {
    right: -66px;
}

.sw-listcarousel-arrow-icon {
    position: absolute;
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/icons/arrows.svg');
    background-size: 32px 384px;
    height: 32px;
    width: 32px;
    top: 50%;
    margin-top: -16px;
    right: var(--spacing-04);
}

.sw-listcarousel-left-arrow .sw-listcarousel-arrow-icon {
    background-position: 0 -192px;
}

.sw-listcarousel-right-arrow .sw-listcarousel-arrow-icon {
    background-position: 0 -224px;
}

.sw-listcarousel-left-arrow:hover .sw-listcarousel-arrow-icon,
.sw-listcarousel-left-arrow:focus .sw-listcarousel-arrow-icon {
    background-position: 0 -64px;
}

.sw-listcarousel-right-arrow:hover .sw-listcarousel-arrow-icon,
.sw-listcarousel-right-arrow:focus .sw-listcarousel-arrow-icon {
    background-position: 0 -96px;
}

.has-lgcells .sw-listcarousel-arrow-box {
    width: var(--spacing-12);
}

.has-lgcells .sw-listcarousel-left-arrow {
    left: var(--spacing-12-negative);
}

.has-lgcells .sw-listcarousel-right-arrow {
    right: var(--spacing-12-negative);
}

.has-lgcells .sw-listcarousel-right-arrow .sw-listcarousel-arrow-icon {
    right: 0;
}

/* End Legacy Carousel */