/*=============================================================================
  NEW CSS

  DO NOT DELETE THIS FILE!
=============================================================================*/

/* New button classes */
.button-brand {
	background-color: var(--color-brand-primary-01);
	color: var(--color-brand-text-on-primary);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-brand__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-brand:visited {
	color: var(--color-brand-text-on-primary);
}

.button-brand:focus,
.button-brand:active,
.button-brand.active,
.button-brand:hover {
	background-color: var(--color-brand-primary-02);
	color: var(--color-brand-text-on-primary);
}

.button-brand.disabled,
.button-brand.disabled:hover {
	opacity: var(--opacity-disabled);
}

.button-ghost {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
	border: var(--border-weight-01) solid var(--color-border-button-ghost);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-ghost__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-03);
}

.button-ghost:visited {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
}

.button-ghost:focus,
.button-ghost:active,
.button-ghost.active,
.button-ghost:hover {
	background-color: var(--color-surface-button-ghost-hover);
	color: var(--color-text-button-on-ghost-hover);
	border: var(--border-weight-01) solid var(--color-border-button-ghost-hover);
}

.button-ghost.disabled,
.button-ghost.disabled:hover {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
	opacity: var(--opacity-disabled);
}

.button-critical {
	background-color: var(--color-surface-button-critical);
	color: var(--color-text-button-on-critical);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-critical__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-critical:visited {
	color: var(--color-text-button-on-critical);
}

.button-critical:focus,
.button-critical:active,
.button-critical.active,
.button-critical:hover {
	background-color: var(--color-surface-button-critical-hover);
	color: var(--color-text-button-on-critical-hover);
}

.button-cart {
	background-color: var(--color-surface-button-cart);
	color: var(--color-text-button-on-cart);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-cart__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-cart:visited {
	color: var(--color-text-button-on-cart);
}

.button-cart:focus,
.button-cart:active,
.button-cart.active,
.button-cart:hover {
	background-color: var(--color-surface-button-cart-hover);
	color: var(--color-text-button-on-cart-hover);
}

.button-cart.disabled,
.button-cart.disabled:hover {
	opacity: var(--opacity-disabled);
}

.button-icon {
	background-color: var(--color-surface-button-ghost);
	padding: var(--spacing-03);
}

.button-icon:focus,
.button-icon:active,
.button-icon.active,
.button-icon:hover {
	background-color: var(--color-surface-button-ghost-hover);
}

.button-large {
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

/* Sitewide and Component Images */
.image__container {
    position: relative;
    display: block;
    height: auto;
    width: auto;
}

.image__container-rod {
    aspect-ratio: var(--image-apparel);
}

.image__container-reel {
    aspect-ratio: var(--image-reel);
}

.image__container-bait {
    aspect-ratio: var(--image-bait);
}

.image__container-hardgood {
    aspect-ratio: var(--image-hard-good);
}

.image__container-apparel {
    aspect-ratio: var(--image-apparel);
}

.image__container-shoe {
    aspect-ratio: var(--image-shoe);
}

.image__container-misc {
    aspect-ratio: var(--image-undefined);
}

.image__container-article {
    aspect-ratio: var(--image-article);
}

.image__container-pro {
    aspect-ratio: var(--image-pro);
}

.image__container-custom {
    aspect-ratio: var(--image-custom);
}

.image__container-undefined {
    aspect-ratio: var(--image-undefined);
}

.image__container-mixed {
    aspect-ratio: var(--image-mixed);
    width: auto;
    height: auto;
}

/* Image Types */
.image__base {
    position: absolute;
}

.image__rod {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-rod);
}

.image__reel {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-reel);
}

.image__bait {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-bait);
}

.image__hardgood {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-hard-good);
}

.image__apparel {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-apparel);
}

.image__shoe {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-shoe);
}

.image__misc {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-undefined);
}

.image__article {
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    aspect-ratio: var(--image-article);
}

.image__pro {
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    aspect-ratio: var(--image-article);
}

.image__custom {
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: var(--image-custom);
}

.image__undefined {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-undefined);
}

/* Alert CSS */
.alert-warning .alert-link {
    color: var(--color-text-support-backorder);
    font-weight: var(--font-weight-reg);
    text-decoration: underline;
}

.alert-warning .alert-link:hover,
.alert-warning .alert-link:focus,
.alert-warning .alert-link:active {
    text-decoration: none;
}

.alert.alert-danger.order-error-js {
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid {
    display: flex;
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid .icon {
    background-position: var(--icon-position-md-color);
    min-width: var(--icon-size-md);
    margin-right: var(--spacing-02);
}

.alert.is-backordered {
    background-color: var(--color-surface-support-backorder);
    border: var(--border-weight-01) solid var(--color-border-support-backorder);
    color: var(--color-text-support-backorder);
    font: var(--text-body-md-compact);
}

.alert.is-low-stock {
    background-color: var(--color-surface-support-warning);
    border: var(--border-weight-01) solid var(--color-border-support-warning);
    color: var(--color-text-support-warning);
    font: var(--text-body-md-compact);
}

/* Standard Links */
.text-link {
    color: var(--color-text-link-default);
    text-decoration: underline;
}

.text-link:hover,
.text-link:focus,
.text-link:active {
    color: var(--color-text-link-hover);
    text-decoration: none;
}

.text-link:visited {
    color: var(--color-text-link-visited);
}

/* Images (Border Radius on All Site Images) */
img {
    border-radius: var(--border-radius-md);
}

/* Scroll to Show */
.scroll_to_show {
    visibility: visible;
    opacity: 1;
    transition: visibility .2s, opacity .2s;
}

.scroll_to_show.is-invisible {
    visibility: hidden;
    opacity: 0;
}

/* Front Page */
.front_page {
    padding: 0;
}

@media (min-width: 1200px) {

    .front_page {
        padding: 0 var(--spacing-03);
    }
}

.body_scroll {
    position: relative;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: -60px;
    right: 20px;
    background-color: var(--black);
    border: var(--border-weight-01) solid var(--color-border-secondary);
    width: 40px;
    height: 0;
    padding-top: var(--spacing-10);
    text-indent: -9999px;
    z-index: 3;
    border-radius: 50%;
    cursor: pointer;
    opacity: var(--opacity-50);
    transition: opacity .2s ease-in;
}

.back-to-top:hover {
    opacity: var(--opacity-100);
}

.back-to-top:after {
    content: '';
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    position: absolute;
    top: 7px;
    left: 7px;
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/icons/ui-arrow-up.svg');
    background-size: var(--icon-size-md);
    background-position: var(--icon-position-md-white);
    cursor: pointer;
}

/* Read more */
.read_more {
    position: relative;
    overflow: hidden;
    transition: height .3s ease-out;
}

.read_more::after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    pointer-events: none;
}

.shown {
    margin-bottom: var(--spacing-02);
}

.shown:after {
    height: 0%;
    transition: height .3s ease-out;
}

.read_more-btn {
    padding: 0;
    border: none;
    font: var(--text-link-lg);
    color: var(--color-text-primary-dark);
    background-color: var(--color-surface-primary);
    text-decoration: underline;
}

.read_more-btn:focus,
.read_more-btn:hover {
    text-decoration: none;
    color: var(--color-text-link-hover);
}

.read_more .check_read-inner p {
    margin: 0;
}

.read_more .check_read-inner img {
    max-width: 100%;
}

/* Lazy loading */
.catpage .lz-img {
    display: none;
    background-image: url("../loading2.html");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 0 auto 10px;
}

/* Privacy Policy/Cookie Overlay */
.cookie_agree {
    position: fixed;
    bottom: var(--spacing-10);
    left: 0;
    max-width: 1200px;
    font-size: var(--font-size-100);
    color: var(--black);
    z-index: 2000;
}

.cookie_agree .row {
    margin: 0;
    padding: var(--spacing-06) var(--spacing-03);
    border-radius: var(--border-radius-md);
    background: var(--white);
    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.2);
}

.cookie_agree-btn {
    margin-top: var(--spacing-04);
}

@media (min-width: 480px) {

    .cookie_agree .row div:first-child {
        padding-right: var(--spacing-04);
        align-self: center;
    }

    .cookie_agree-btn {
        margin-top: 0;
    }
}

@media (min-width: 576px) {

    .cookie_agree .row div:first-child {
        padding-right: var(--spacing-03);
    }
}

@media (min-width: 1200px) {

    .cookie_agree {
        left: 50%;
        margin-left: -600px;
    }
}

/* Padding/Margin Bottom Classes for Misc Use */
.pb-40 {
    padding-bottom: var(--spacing-10) !important;
}

.mb-40 {
    margin-bottom: var(--spacing-10) !important;
}