/*------------------------------------*\
  #Root
\*------------------------------------*/

:root {
  --Primary-color: #003882;
  --Secondary-color-blue: #0E92D8;
  --Secondary-color-magenta: #FF436E;
  --Secondary-color-green: #1EC85A;
  --Secondary-color-yellow: #E6EB14;

  --Text-color: var(--Black-color);
  --Button-color:
    /* Button colors */
  ;
  --Button-hover-color:
    /* Button hover colors */
  ;

  /* Neutral Colors */
  --Background-color: #FAF7F0;
  --Background-color-2: #f3f1e4;
  --White-color: #FFFFFF;
  --Black-color: #1F1C19;
  --Grey-color: #CCCAC8;
  --Grey-light-color: #EFEFEF;

  --Danger-color: #D41111;
  --Danger-hover-color: #c81010;
}

@font-face {
  font-family: 'NewHero';
  font-weight: 900;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-ExtraBold.otf');
}


@font-face {
  font-family: 'NewHero';
  font-weight: 700;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-Bold.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 500;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-Medium.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 400;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-Regular.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 300;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-Light.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 200;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-Hairline.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 900;
  font-style: italic;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-ExtraBoldItalic.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 700;
  font-style: italic;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-BoldItalic.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 500;
  font-style: italic;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-MediumItalic.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 300;
  font-style: italic;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-LightItalic.otf');
}

@font-face {
  font-family: 'NewHero';
  font-weight: 200;
  font-style: italic;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/NewHero-HairlineItalic.otf');
}

@font-face {
  font-family: 'NewKansas';
  font-weight: 400;
  font-style: normal;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/New Kansas Regular.otf');
}


/*------------------------------------*\
  #BASE
\*------------------------------------*/
/* General */
body {
  font-family: 'NewHero';
  font-weight: 400;
  font-style: normal
}

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

.catfish-button,
.button {
  font-weight: 500;
}

.productlistproductdetailbutton {
  background: transparent;
  border: 2px solid var(--Secondary-color-magenta);
  color: var(--Text-color);
  font-weight: 600;

  &:focus,
  &:hover,
  &:active {
    background-color: var(--Secondary-color-magenta);
    color: var(--Text-color);
  }
}

#continueshoppingDummy, .is-outlined:not(.has-style-custom-2, .has-style-custom-1){
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    border-color: var(--Primary-color);
    color: var(--Primary-color);
    
    &:hover{
        background-color: var(--Primary-color);
        color: var(--White-color);
    }
}

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

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


.is-light.box{
  background-color: var(--Background-color-2);
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
/* Button */
.button.has-style-custom-1 {
  border-color: var(--White-color);
  color: var(--White-color);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--White-color);
    color: var(--Text-color);
    border-color: var(--White-color);
  }
}

.back-link a,
.button.has-style-custom-2 {
  border-color: var(--Secondary-color-magenta);
  background-color: transparent;
  color: var(--Secondary-color-magenta);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--Secondary-color-magenta);
    color: var(--White-color);
    border-color: var(--Secondary-color-magenta);
  }
}

/* Typography */
h2.has-style-custom-1 {
  font-family: 'NewKansas';
}

h3.has-text-custom-1 {
  color: var(--Secondary-color-magenta);
}

/* Background */
.has-background-custom-1 {
  background-color: var(--Background-color-2);
}

.has-background-image-top-left {
  position: relative;
}

.has-background-image-top-left::before {
  content: '';
  background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/svgviewer-output6.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 14rem;
  height: 14rem;
  position: absolute;
  top: -4rem;
  left: -4rem;
}

/* Box Shadow */
.has-box-shadow {
  box-shadow: 0px 8px 24px 0px rgba(31, 28, 25, 0.30);
  ;
}

/* Border */
.has-border {
  border: 1px solid var(--Grey-color);
}

.has-border-bottom-columns .columns {
  border-bottom: 1px solid var(--Grey-color);
}

/* Overlay */
.overlay-background {
  position: relative;
}

.overlay-background::before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .9) 30%, rgba(0, 0, 0, 0));
}

/* Columns */
@media screen and (max-width:1087px) {
  .has-columms-space-evenly-touch .columns {
    justify-content: space-evenly !important;
  }
}

/* Column */
@media screen and (min-width:1088px) {
  .has-width30.column {
    width: 30%;
  }
}

@media screen and (max-width:600px) {
  .has-width80-600px.column {
    width: 80%;
  }

}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/
.ui-dialog{

  .ui-dialog-titlebar{
    border-bottom: 2px solid var(--Grey-light-color);

    .ui-dialog-title{
      font-weight: 700;
      color: var(--Primary-color);
    }
  }

  .ui-button{
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
  }

  .ui-dialog-buttonpane{
    background-color: var(--White-color);
    border-top: 2px solid var(--Grey-light-color);

    .ui-button.ui-widget:nth-child(2){
    background-color: transparent;
        border: 2px solid var(--Danger-color);
        color: var(--Danger-color);

        &:hover,
        &:focus,
        &:active{
          background-color: var(--Danger-hover-color);
          color: var(--White-color);
        }
    }
  } 
  
  
}

.dialog{

  .modal-card-head {
    border-bottom: 2px solid var(--Grey-light-color);

    .modal-card-title{
      color: var(--Primary-color);
    }
  }

  .modal-card-foot{
    background-color: var(--White-color);
    border-top: 2px solid var(--Grey-light-color);

    .button.is-light{
      background-color: transparent;
      border: 2px solid var(--Danger-color);
      color: var(--Danger-color);

      &:hover,
      &:focus,
      &:active{
        background-color: var(--Danger-hover-color);
        color: var(--White-color);
      }
    }
  }
}

/* Product Cards */
.product-grid,
.homeFeaturedProductsWrapper {
  .listWrapper .listItem {
    .item-box {
      .catfish-default-product-box {
        .product-item--info{
          background: var(--Primary-color);

          .product-item--content{
            
            a{
              color: var(--Secondary-color-blue);
            }

            .description{
              color: var(--White-color);
            }

            .alternate--prices {
              color: var(--White-color);
            }
          }
        }
      }
    }
  }
}
/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
/* HEADING */

.navbar {
  background-color: var(--Background-color);

  .is-header-logo {
    height: 7rem !important;
    margin-bottom: -2rem !important;
    max-height: 5rem;
  }


  a.navbar-item,
  a.navbar-link {
    font-size: 0.8888888888888889rem;
    padding: .5rem;

    &:hover,
    &:focus,
    &:active {
      color: var(--Text-color);
    }
  }

  .navbar-link:not(.is-arrowless) {
    padding-right: 2em;
  }

  .navbar-link:not(.is-arrowless)::after {
    border-color: var(--Text-color)
  }

  /* Buttons */
  .navbar-item:has(.button) {
    padding: .5rem;
  }

  .button {
    background-color: transparent;
    color: var(--Text-color);
    padding-left: .75rem !important;
    padding-right: .75rem !important;

    &:hover,
    &:focus,
    &:active {
      background-color: var(--Primary-color);
      color: var(--White-color);
    }

    i {
      font-size: 1.111111rem;
      font-weight: 500;
    }
  }

  .button:first-child {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }


  @media screen and (min-width: 1088px) {
    #main-navbar {
      justify-content: flex-end;

      .navbar-start {
        margin-right: unset;
      }

      .navbar-end {
        margin-left: unset;
      }

      .navbar-dropdown {
        border-color: var(--Border-color);
      }
    }
  }

  @media screen and (min-width: 1088px) {

    a.navbar-item,
    a.navbar-link {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      transition: .1s;
      text-underline-offset: 0.5rem;
      -webkit-transition: .1s;
      -moz-transition: .1s;
      -ms-transition: .1s;
      -o-transition: .1s;
      font-weight: 600;

      &:hover,
      &:focus,
      &:active {
        color: var(--Text-color);
        text-decoration: underline !important;
        text-decoration-color: var(--Secondary-color-magenta) !important;
        -moz-text-decoration-color: var(--Secondary-color-magenta) !important;
        text-decoration-thickness: 2px !important;
      }
    }

    .navbar-dropdown a.navbar-item:focus,
    .navbar-dropdown a.navbar-item:hover {
      background-color: transparent;
    }
  }
}

@media screen and (max-width: 1550px) and (min-width: 1301px) {
  .navbar a.navbar-item,
  .navbar a.navbar-link{
    font-size: .75rem;
  }
}

@media screen and (max-width: 1300px) and (min-width: 1088px) {
  .navbar {
    a.navbar-item,
    a.navbar-link{
      font-size: .7rem;
    }

    .navbar-item:has(.button){
      padding: 0;

      .button{
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        
        &:first-child {
          padding-left: .75rem !important;
          padding-right: .75rem !important;
        }
      }
      

      i {
        font-size: .89rem;
        font-weight: 500;
      }
    }
  }
}

@media screen and (max-width: 1087px) {
  .navbar .navbar-brand .navbar-item {
    padding: 0rem 1rem;
    height: 4rem;

    i {
      font-size: 1rem;
      font-weight: 500;
    }
  }

  .navbar-group{
    align-items: center;
  }
}

@media screen and (max-width: 1087px) {
  .navbar-menu {
    background-color: var(--Background-color);
  }
}

/* Footer */
.ict-dedicated-footer {
  .image.dedicated-footer-logo img {
    height: 5rem;
  }

  ul {
    display: flex !important;
    flex-direction: column;
    gap: .5rem;
  }

  .ict-dedicated-footer-column-4 {
    .is-flex-direction-column {
      align-items: flex-end;
      justify-content: flex-end;
      height: 100%;
    }

    .ict-social-links {
      flex-direction: row;
    }
  }

  a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4rem;
    transition: .1s;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -ms-transition: .1s;
    -o-transition: .1s;


    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
      text-decoration-color: var(--Secondary-color-magenta);
      -moz-text-decoration-color: var(--Secondary-color-magenta);
      text-decoration-thickness: 2px;
    }
  }

  .footer-copyright {
    h4 {
      font-size: 80%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      border-top: 1px solid var(--Grey-color);
      margin-top: 1.5rem;
    }
  }
}

/* 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;
    }
}


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

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

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


/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/
/* Homepage */
.homeFeaturedProductsWrapper{
    position: relative;

  &::before{
    content: "";
    background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/Product_Background.svg");
    width: 40rem;
    height: 31%;
    position: absolute;
    bottom: -10rem;
    right: 0;
    display: block;
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
  }
}

/* Category Pages */
.hero.category-hero-section {
  background-color: var(--Black-color);

  h1.title {
    font-family: 'NewKansas';
    color: var(--Secondary-color-magenta);
  }
}

.pager{
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Product Landing Pages */
.arone-product-landing-page {

  h1.title {
    font-family: 'NewKansas';
  }

  .attributeTitle {
    color: var(--Primary-color);
  }

  .producttags-box {
    .tag:not(body).is-primary {
      background-color: var(--Secondary-color-blue);
    }
  }
}

/* Mega Edit */
.loadingScreen .loadingLogo::before {
  content: "";
  /* Change the mega edit image here using the same naming structure on CSS  override */
  background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/ME_Logo.png");
  width: 14rem;
  height: 50%;
  position: absolute;
  top: -4rem;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.loadingScreen .fa-cog,
.addtoBasketScreen .fa-spinner {
  border-right-color: var(--Secondary-color-blue);
}

.loadingScreen .ME_loading_hints ul li {
  border-color: var(--Grey-color);
}

#addToBasketScreenMsg,
.loadingScreen .ME_loading_hints ul li,
.ME_loading_hints ul li::before,
.loadScreenStepIndicator {
  color: var(--White-color) !important;
}

.addtoBasketScreen .addtoBasketScreenContainer>h1::before {
  width: 20rem;
}

.addtoBasketScreen .addtoBasketScreenContainer>h1::before {
  transform: translateX(-5rem);
}

.loadingScreen .loadingSpinner,
.addtoBasketScreen .loadingSpinner {
  position: relative;
  top: 5rem;
}

.loadingScreen .loadingLogo .loadScreenStepIndicator,
.addtoBasketScreen .loadingArea__loadScreenStepIndicator {
  font-size: 1.5rem;
  margin-top: 2rem;
}

/* Basket */
.shoppingcart__wrapper {

  .cartform .cartTableWrapper {

    .cart tr.cart-item-row {
      background-color: var(--Background-color-2);
    }
  }

  .cart-footer {
    .cart-footer__container {
      border: 2px solid var(--Grey-color);
    }
  }
}

.one-page-checkout{

  .cartform .cartTableWrapper {

    .cart tr.cart-item-row {
      background-color: var(--Background-color-2);
    }
  }

  .cart-footer {
    .cart-footer__container {
      border-top: 2px solid var(--Grey-color);
      border-bottom: 2px solid var(--Grey-color);

      .total-info{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
    }
  }
}

.one-page-checkout #opc-confirm_order  .buttons {
  margin-top: 2rem;
}

.page-catalog-productsbytag{

  #contentiInnerRow >.grid_9 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .page-title > h1{
    margin-bottom: 2rem;
    font-size: 2.074em;
    font-family: 'NewKansas';
  }
}

/*------------------------------------*\
 #CHECKOUT STEPS
\*------------------------------------*/
/* Billing Address */
.vue-component-wrapper-shipping-address .advanced-select,
.vue-component-wrapper-billing .advanced-select{
  
  
  .selected-item,
  .item-list,
  .footer-controls{
    border-width: 2px;
  }

  .item-list.box{
    background-color: var(--Background-color-2);
  }

  .footer-controls{
    background-color: var(--Background-color);
  }
}

/* Delivery Methods */
.one-page-checkout #opc-shipping_method .shipping-options {
  background: var(--Background-color-2);

  .shipping-options__list .shipping-option-item label {
    border: 2px solid var(--Grey-color);
    background: transparent;
    
  }

  .shipping-option-item input:checked + label{
    background: var(--Primary-color);
    box-shadow: 0px 4px 12px 0px rgba(31, 28, 25, 0.30);
  }

  .shipping-options__list .shipping-option-item input:checked + label::before {
    color: var(--White-color);
  }
  

  .shipping-options__list .shipping-option-item input:checked + label::after {
    background: var(--Primary-color);
    color: var(--Background-color);
    border-color: var(--White-color);
  }

  .shipping-option-item input:checked + label .ui-button-text{
    color: var(--White-color);
  }
}

/* Payment Info */
#opc-payment_info{

  .step-title.request-after-confirm{
    display: none !important;
  }
}

/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/

/*------------------------------------*\
    #TOPIC PAGES
\*------------------------------------*/
/* FAQ */
.ict-accordion {

  .accordion-item {
    .has-text-dark {
      color: var(--White-color) !important;
    }
  }

  .accordion-item:nth-of-type(2n) .button.accordion-title {
    border-color: var(--Secondary-color-magenta);
    color: var(--Text-color);
    background-color: var(--Secondary-color-magenta);

    .has-text-dark {
      color: var(--Text-color) !important;
    }
  }

  .accordion-item:nth-of-type(3n) .button.accordion-title {
    border-color: var(--Secondary-color-yellow);
    color: var(--Text-color);
    background-color: var(--Secondary-color-yellow);

    .has-text-dark {
      color: var(--Text-color) !important;
    }
  }

  .accordion-item:nth-of-type(4n) .button.accordion-title {
    border-color: var(--Secondary-color-green);
    color: var(--Text-color);
    background-color: var(--Secondary-color-green);

    .has-text-dark {
      color: var(--Text-color) !important;
    }
  }

  .accordion-item.is-active .accordion-content {
    padding-bottom: 1rem;
  }
}