:root{
    --primary-blue-color: #101820;
    --secondary-red-color: #CD2122;
    --neutral-dark-grey-color: #5C6770;

    --button-color: var(--secondary-red-color);
    --button-hover-color: #b12028;


    /* Neutral Colors */
    --neutral-light-grey-color: #F2F3F3;
    --neutral-white-color: #fff;
    
     /* Admin Colors */
    --Danger-color: #cf4646;
    --Danger-hover-color: #cc3c3c;

    /* Infigo Brand colors  */
    --primary-navy-color: #002e47;
    --primary-coral-color: #ff6867;
}

/* ---------------------- */
/* ----Base - Start--- */
/* ---------------------- */
/* Base - Start */
html:not(.page-dynamicproduct-editor, .page-shoppingcart-cart) .catfish-button:not(.is-danger, .is-outlined, #deleteall, #continueshoppingDummy),
.button:not(.is-small, .accordion-title){
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.catfish-button,
.button,
a{
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

html:not(.page-dynamicproduct-editor) .catfish-button,
.button{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    font-weight: 700;
}


p:not(.back-link) > a{
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: .3s;
    text-underline-offset: 0.25rem;

    &:hover{
        color: var(--Button-hover-color);
        text-decoration: underline !important;
    }
}
/* General - End */

/* ---------------------- */
/* Components - Start */
/* ---------------------- */
/* Component - Custom */
a.button.is-primary:not(.is-small){
    background-color: var(--button-color);
    color: var(--neutral-white-color);

    &:hover{   
        background-color: var(--button-hover-color);
    }
}

a.button.has-style-custom-1{
    background-color: var(--neutral-white-color);
    color: var(--secondary-red-color);

    &:hover{   
        background-color: var(--primary-blue-color);
        color: var(--neutral-white-color);
    }
}


a.button.has-style-custom-2{
    background-color: var(--primary-blue-color);
    color: var(--neutral-white-color);

    &:hover{   
        background-color: var(--neutral-white-color);
        color: var(--primary-blue-color);
    }
}

.title,
h1,h2,h3,h4,h5,h6{
    text-transform: uppercase;
}

h2:has(a){
    text-transform: unset;
}

/* Banner */

.main-banner{

    @media screen and (max-width: 900px) {         
        text-align: center !important;

        & .column{
            width: 100%;
        }
    }
}

.section.overlay-background{
    position: relative;
}

.section.overlay-background::before{
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(90deg, rgba(2, 3, 15, 0.2) 50%, rgba(255,255,255,0) 100%);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.section.overlay-background-2{
    position: relative;
}


.section.overlay-background-2::before{
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(90deg, rgba(2, 3, 15, 0.5) 50%, rgba(255,255,255,0) 100%);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1087px){
    .section.overlay-background::before{
        background: linear-gradient(90deg, rgba(2, 3, 15, 0.4) 100%, rgba(255,255,255,0) 100%);
    }
   
}

@media screen and (max-width: 767px){
    .section.overlay-background::before{
        background: linear-gradient(90deg, rgba(2, 3, 15, 0.6) 100%, rgba(255,255,255,0) 100%);
    }
}

#deleteall{
    background-color: var(--Danger-color);

    &:hover{
        background-color: var(--Danger-hover-color);
    }
}

#checkDepartmentChanged{
    background-color: var(--button-color);

    &:hover{
        background-color: var(--button-hover-color);
    }
}

.editaddressbutton.catfish-button{
    background-color: transparent;
    border: 2px solid var(--primary-blue-color);
    color: var(--primary-blue-color);

    &:hover{
        background-color: var(--primary-blue-color);
        color: var(--neutral-white-color);
    }
}

/* Two Column  */
.section.box-shadow-column .block.is-content-width{
    box-shadow: 0 3px 36px var(--neutral-dark-grey-color);
    padding: 4rem;
}

@media screen and (max-width: 475px) {
    .section.box-shadow-column .block.is-content-width{
        padding: 2rem;
    }
}



@media screen and (min-width: 1088px) {
    .section.is-extra-large{
        padding-top: 9rem !important;
        padding-bottom: 9rem !important;
    } 

    .section.is-extra-large-two{
        padding-top: 15rem !important;
        padding-bottom: 15rem !important;
    } 

    .ict-image.image-width-75{
        width: 75%;
    }
}

@media screen and (max-width: 1087px) {
    .ict-image.image-width-75{
        width: 50%;
    }
}

/* Product Cards*/
.bestsellers h3.title{
    color: var(--primary-blue-color);
    font-size: 2.728em !important;
    font-weight: 700;
    
}

.homeFeaturedProductsWrapper .title,
.title.has-style-custom-1,
.section.related-products-section h3.title{
    width: fit-content;
    height: fit-content;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.728em !important;
}

.homeFeaturedProductsWrapper .title::first-letter,
.title.has-style-custom-1::first-letter,
.section.related-products-section h3.title::first-letter{
    color: var(--secondary-red-color);
}

.homeFeaturedProductsWrapper .title::after,
.title.has-style-custom-1::after,
.section.related-products-section h3.title::after {
    content:"=";
    display:block;
    position:absolute;
    left:0;
    font-size: 0.75em;
    height: 0.75em;
    color: white;
    pointer-events: none;
}


.homeFeaturedProductsWrapper .title::after{
    bottom: 0.75em;
}

.section.related-products-section h3.title::after{
    font-size: 0.6em;
    bottom: 1.6em;
    left: 0.6em;
}


.title.has-style-custom-1::after{
    bottom: 0.28em;
}

.product-item--content{
    text-align: center;
}

.product-title a{
    color: var(--primary-blue-color);
}

.addtocart.level-left{
    display: none;
}

.productlistproductdetailbutton{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.add-info .buttons{
    width: 80%;
}

.add-info .pricerow{
    display: flex;
    justify-content: center;
}

.product-item--info .flex-container{
    display: flex;
    justify-content: center !important;
}

.listItem .product-item--image .picture {
    transition: .3s;
    padding: 1rem;
}

.listItem:hover .product-item--image .picture {
    padding: -0rem;
}

@media screen and (max-width: 1279px) and  (min-width: 1088px) {
    & .listItem{
        width: 33.333333% !important;
    }
}

@media screen and (max-width: 1087px) {
  /* Custom */
  & .product-item--info,
  & .add-info {
      background: #fff !important;
  }
}

@media screen and (max-width: 475px) {

    & .listItem{
        width: 100% !important;
    }
}

/* Custom Styling - End */

/* ---------------------- */
/* Layouts - Start */
/* ---------------------- */

/* Navbar */
.is-header-logo {
    height: 2rem;
}

.navbar-item,
.navbar-item a{
    font-weight: 500;
    color: var(--primary-blue-color) !important;
}

.navbar-item:hover,
.navbar-item a:hover,
.navbar-link:hover{
    font-weight: 500;
    color: var(--neutral-dark-grey-color) !important;
}

.content-field-navbar .navbar-link:not(.is-arrowless)::after{
    border-color: var(--primary-blue-color);
}

.navbar-item .buttons .button{
    background: transparent;
    color: var(--primary-blue-color);
    font-size: 1rem;
}

.navbar-item .buttons .button:focus,
.navbar-item .buttons .button:hover{
    color: var(--neutral-light-grey-color);
    box-shadow: none;
}

@media screen and (max-width: 475px) {
    .is-header-logo{
      height: 1.5rem;
    }
}

/* Footer */
.ict-dedicated-footer .image img{
    object-fit: contain;
}

.footer-column-content a, 
.ict-dedicated-footer .columns .column .ict-list li a{
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: .3s;
    text-underline-offset: 0.25rem;
}

.footer-column-content a:hover,
.ict-dedicated-footer .columns .column .ict-list li a:hover{
    color: inherit;
    text-decoration: underline !important;
}

.ict-dedicated-footer h3.subtitle{
    font-weight: 700;
}

.ict-dedicated-footer .block .ict-list a{
    font-weight: 500;
}

/* Sections */
@media screen and (max-width: 1087px){
    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media screen and (max-width: 767px){
    section.section.is-large,
    .homeFeaturedProductsWrapper,
    .ict-dedicated-footer{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page{
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Layout - End */

/* ---------------------- */
/* Admin Pages - Start */
/* ---------------------- */
/* Category Landing */
.category-hero-section{
    background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/22/Significans-productbanner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    & .hero-body{
        height: 50vh;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .title{
        font-size: 5.074em;
        font-weight: 900;

        &::first-letter{
            color: var(--secondary-red-color);
        }

        @media screen and (max-width: 475px) {
            font-size: 3.5em;
        }
    }
}

@media screen and (min-width: 768px), print{
    .category-product-section .listWrapper{
        justify-content: center;
    }
}   

.pager{
    margin-top: 1.5rem;
}


/* Product Landing */
.details-wrapper h1.title{
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-blue-color);
    text-transform: unset;
}

.details-wrapper .productPrice.title{
    font-size: 2.4444em !important;
    font-weight: 700;
}

.arone-product-landing-page .attribute input:checked + label.button{
    background-color: var(--button-color);
}

.arone-product-landing-page .attribute label.button:hover{
    background-color: var(--button-hover-color);
    color: var(--neutral-white-color);
}

.arone-product-landing-page .attribute .button{
    border: none;
}

.arone-product-landing-page .attribute .catfish-select {
    border-color: var(--neutral-light-grey-color);
}

.price-quantity-start-wrapper .quantity-wrapper .quantityBox {
    box-shadow: inset 0 1px 2px var(--neutral-dark-grey-color);
}

.section.three-column-section .column{
    border: 2px solid var(--secondary-red-color);
    padding: 3rem;
}

/* Related Section */
.related-products-section{
    background-color: transparent !important;
}

@media screen and (min-width: 1088px) {
    .section.three-column-section .columns{
        gap: 7rem;
    }
}

@media screen and (max-width:1088px) and (min-width: 768px) {
    .section.three-column-section .columns{
        gap: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .section.three-column-section .columns{
        gap: 2rem;
    }

    .section.three-column-section .column{
        width: 80%;
    }
}

.price-quantity-start-wrapper .quantity-wrapper .catfish-input{
    border-color: transparent;
}

.section.related-products-section h3.title{
    text-align: center;
    color: var(--primary-blue-color) !important;
    font-size: 2.728em !important;
    font-weight: 700;
}

/* Mega Edit - Screen */
#loadingScreen::before,
.addtoBasketScreen::before{
    content: '';
    background-image: url("/-419134239/Handler/Picture/GU/F/ThemeImages/mesh_background.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(25% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 60%);

    @media screen and (max-width: 767px) {
        clip-path: polygon(25% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 45%);
    }

    @media screen and (max-width: 475px) {
        clip-path: polygon(45% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 25%);
    }
}

.loadingScreen .loadingLogo::before,
.addtoBasketScreen .addtoBasketScreenContainer::before{
    content: "";
    background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/22/Color-Logo.png");
    width: 30rem;
    height: 50%;
    position: absolute;
    top: -2rem;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.loadingScreen .loadingLogo::after,
.addtoBasketScreen .addtoBasketScreenContainer::after{
    content: "";
    background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/22/White-Logo.png");
    width: 20rem;
    height: 100%;
    position: absolute;
    top: 18rem;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.loadingScreen .loadScreenStepIndicator{
    position: relative;
}

.loadingScreen .loadingLogo .ME_loading_hints{
    display: none;
}

.loadingScreen .loadingLogo .loadScreenStepIndicator{
    color: var(--neutral-white-color);
    font-size: 1.5rem;
    margin-top: 2rem;
}

.loadingScreen .fa-cog,
.addtoBasketScreen .addtoBasketScreenContainer .icon{
    height: 13rem !important;
    width: 13rem !important;
}

.loadingSpinner .slow-spin,
.addtoBasketScreen .addtoBasketScreenContainer .icon i{
    border: .1875rem solid var(--neutral-white-color);
    border-right-color: var(--secondary-red-color);
}

#addToBasketScreenMsg{
    color: var(--neutral-white-color);
}

.ui-dialog.ui-widget.ui-widget-content{

    & .ui-dialog-titlebar{
        background-color: var(--primary-blue-color);

        & .ui-dialog-title{
            color: var(--neutral-white-color);
        }

        & .ui-button-icon-primary{
            background-color: var(--Danger-color);

            &::before,
            &::after{
                background-color: var(--neutral-white-color);
            }

            &:hover{
                background-color: var(--Danger-hover-color);
            }
        }
    }
}

.ui-dialog-buttonpane{
    background-color: #e5e1e6;
}

@media screen and (min-width: 1089px) {
    #loadingScreen{
        background-size: 100% 110%;
    }
}

@media screen and (max-width: 926px) {
    .loadingScreen .loadingLogo::before{
        top: -4rem;
    }

    .loadingScreen .loadingLogo::after{
        top: 13rem;
    }
}

@media screen and (max-width: 720px) {
    .loadingScreen .loadingLogo::before{
        top: -1rem;
    }

    .loadingScreen .loadingLogo::after{
        top: 9rem;
    }

    .loadingScreen .loadingLogo::before {
        width: 13rem;
    }

    .loadingScreen .fa-cog{
        height: 7rem !important;
        width: 7rem !important;
    }

    .loadingScreen .loadingLogo::after{
        width: 15rem;
    }
}

/* Cart Page */
.shoppingcart__wrapper .deals{
    padding: 2rem;
    background: var(--secondary-red-color);
    color: var(--neutral-white-color);
}

.shoppingcart__wrapper .deals #discountcouponcode{
    background: transparent;
    border-width: 3px;
    color: var(--neutral-white-color);
}

.shoppingcart__wrapper #applydiscountcouponcode{
    background: var(--neutral-white-color);
    color: var(--secondary-red-color);
    font-weight: 700;
}

.checkout-buttons__wrapper #continueshoppingDummy{
    border: 2px solid var(--primary-blue-color);
    background: transparent;
    color: var(--primary-blue-color);
    font-weight: 700;
}

.checkout-buttons__wrapper #continueshoppingDummy:hover,
.shoppingcart__wrapper #applydiscountcouponcode:hover{
    background: var(--primary-blue-color);
    color: var(--neutral-white-color);
}

.common-buttons .updatecartbutton,
.cart--actions__buttons .basketEditButton{
    background: var(--neutral-white-color);
    color: var(--primary-blue-color);
    border: 2px solid var(--primary-blue-color);
}

.common-buttons .updatecartbutton:hover,
.cart--actions__buttons .basketEditButton:hover{
    background: var(--primary-blue-color);
    color: var(--neutral-white-color);
    border: 2px solid var(--primary-blue-color);
}

.shoppingcart__wrapper #cartTotals{
    background: var(--neutral-light-grey-color);
    padding: 2rem;
    color: var(--primary-blue-color);
}

@media screen and (max-width: 767px) {
    .coupon-box__input{
        flex-wrap: wrap;
        gap: 1rem;

        & #discountcouponcode{
            width: 70% !important;
        }
    }
}
/* Pages - End */

/* Topic Pages */

/* Powered by Infigo - Section */
.section.red-background-image .column:nth-child(2){
    position: relative;
    background-color: var(--secondary-red-color);
    padding: 2rem !important;
    padding-left: 2.5rem !important;
    padding-right: 2rem !important;
}

@media screen and (min-width: 1088px) {
    .section.red-background-image .column:nth-child(2)::after{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 99%;
        background-color: var(--secondary-red-color);
    }

    .section.offset-column .column:nth-child(2){
        margin-left: 6rem;
    }
}

@media screen and (max-width: 1087px) {
    .section.red-background-image::after{
        width: calc(100% - -10%);
    }
}

/* About us page */
.boxed-content{
    padding: 2rem 1.5rem;

    & h3{
        text-transform: unset;
        font-weight: 300;
    }
}

.boxed-content.has-background-custom-1{
    background-color: var(--neutral-dark-grey-color);
}

/* About Infigo */
.title.has-text-custom-3,
.subtitle.has-text-custom-3{
    color: var(--primary-coral-color);
}

.subtitle.has-text-custom-4{
    color: var(--primary-navy-color);
}

.infigo-banner{
    
    .column{
        position: relative;
        background-color: var(--primary-navy-color);
        padding: 2rem !important;
        padding-left: 1rem !important;
        padding-right: 2rem !important;
    }

    .column::before{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 99%;
        background-color: var(--primary-navy-color);
    }
}

.boxed-content.has-background-custom-3{
    background-color: var(--primary-navy-color);
}

.boxed-content.has-background-custom-4{
    background-color: var(--primary-coral-color);
}

/* Custom - FAQs Page */
.custom-faq-section .accordion-item .accordion-title {
    background: transparent;
    border-top: solid 3px var(--secondary-red-color);
    color: var(--neutral-white-color);
    font-size: 1.2rem !important;
    margin: 0 !important;
}

.custom-faq-section .accordion-item:last-child .accordion-title{
    border-bottom: solid 3px var(--secondary-red-color);
}

.custom-faq-section .accordion-item .button.is-rounded{
    font-family: 'Nato-light', sans-serif;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    transition: 0s;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -ms-transition: 0s;
    -o-transition: 0s;
}

.ict-accordion .button.is-rounded.accordion-title .fas {
    display: none;
}

.ict-accordion .button.is-rounded.accordion-title:after {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-top: solid 2px var(--neutral-white-color);
    border-right: solid 2px var(--neutral-white-color);
    transition: 0.3s;
    transform: rotate(135deg);
    position: absolute;
    right: 1.5rem;
    top: 1rem;
}

.ict-accordion .button.is-rounded.accordion-title:hover::after {
    border-top: solid 2px var(--secondary-red-color);
    border-right: solid 2px var(--secondary-red-color);
}

.ict-accordion .accordion-item.is-active .button.is-rounded.accordion-title:after {
    transform: rotate(-45deg);
    top: 1.25rem;
}

.ict-accordion .accordion-item.is-active .button.is-rounded.accordion-title {
    border-bottom: 0;
    margin-bottom: 0;
}

.ict-accordion .accordion-item.is-active .button{
    border-top: solid 3px var(--secondary-red-color) !important;
    border-bottom: 0 !important;
    color: var(--neutral-white-color) !important;
}

.ict-accordion .accordion-item .button:hover{
    background-color: transparent !important;
    color: var(--secondary-red-color) !important;
}

.ict-accordion .accordion-item.is-active .button.is-rounded.accordion-title:hover::after {
    border-top: solid 2px var(--secondary-red-color);
    border-right: solid 2px var(--secondary-red-color);
}


.ict-accordion .accordion-item.is-active .accordion-content {
    border-top: solid 3px var(--secondary-red-color);
    border-top: 0;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ict-accordion .accordion-item.is-active:last-child .accordion-content{
    border-bottom: solid 3px var(--secondary-red-color);
}

.custom-faq-section .columns {
    background: var(--neutral-grey-color);
    padding: 1rem;
}

.custom-faq-section.mb-6{
    margin-bottom: 6rem !important;
}