:root {
  --metropol-black: #171619;
  --metropol-grey: #3d4d57;
  --metropol-grey-highlight: #f7f7f7;
  --metropol-orange: #e33c26;
}

/* Custom header */
.navbar>.container {
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 100%;
}

.navbar-brand>.navbar-item {
  padding-top: 0;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: block;
}

a.navbar-item,
.navbar-item>.navbar-link{
  font-weight: 700;
}

.navbar-item .navbar-dropdown {
  border-top: 2px solid var(--metropol-black);
}

.navbar-item:hover .navbar-link{
  color: var(--metropol-orange);
}

.navbar-dropdown:hover ~ a,
.navbar-dropdown:active ~ a{
  color: var(--metropol-orange);
  background-color: var(--metropol-grey-highlight);
}

.navbar-dropdown > .navbar-item{
  font-weight: initial;
}

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

.navbar-link:hover:not(.is-arrowless)::after, 
.navbar-link:focus:not(.is-arrowless)::after{
  border-color: var(--metropol-orange);
}

.navbar-item:hover .navbar-link:not(.is-arrowless)::after {
  border-color: var(--metropol-orange);
}

.navbar>.container>.navbar-brand {
  margin: 0;
}

.navbar {
  font-family: 'Public Sans';
}

.navbar,
.header-spacer {
  height: 8.28rem;
}

/* .navbar .navbar-brand img.is-header-logo {
  object-fit: contain;
  width: auto;
  max-height: 8.28rem;
  height: 8.28rem;
} */

.navbar-burger.burger {
  height: 100%;
}

.nav-search-container {
  background-color: var(--metropol-grey);
}

a.navbar-item,
a.navbar-link,
.navbar-dropdown a.navbar-item,
.navbar-dropdown a.navbar-item {
  transition: 0.2s;

  &:hover,
  &:focus {
      color: var(--metropol-orange);
      background: var(--metropol-grey-highlight);
  }
}

.nav-search-container.is-active {
  transform: translatey(8.28rem);
  -webkit-transform: translatey(8.28rem);
  -moz-transform: translatey(8.28rem);
  -ms-transform: translatey(8.28rem);
  -o-transform: translatey(8.28rem);
}

@media screen and (max-width:1087px) {
  .navbar-item>.badge {
      top: 2.25rem;
  }
}

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

  .navbar-end {
      .catfish-button,
      .button {
          transition: 0.2s;
      }

      .catfish-button.is-white:hover,
      .catfish-button.is-white.is-hovered,
      .button.is-white:hover,
      .button.is-white.is-hovered {
          background: transparent;
          color: var(--metropol-orange);
      }
  }

  .navbar>.container>.navbar-brand {
      z-index: 100;
  }

  .navbar .navbar-brand .navbar-item a {
      display: inline-flex;
      height: 100%;
  }

  .navbar,
  .header-spacer {
      height: 9.28rem;
  }


  /* .navbar .navbar-brand img.is-header-logo {
      object-fit: contain;
      width: auto;
      max-height: 100%;
      height: 100%;
      height: 17.86rem;
      max-height: 17.86rem;
  } */

  .navbar-end {
      margin-right: 5.71rem;
  }

  .nav-search-container {
      height: fit-content;
  }

  .nav-search-container.is-active {
      transform: translatey(14.28rem);
      -webkit-transform: translatey(14.28rem);
      -moz-transform: translatey(14.28rem);
      -ms-transform: translatey(14.28rem);
      -o-transform: translatey(14.28rem);

  }

}

@media screen and (min-width:1088px) and (max-width:1439px) {
  .navbar-menu {
      flex-wrap: nowrap;
  }

  .navbar-start {
      flex: 1;
  }
}



.navbar .navbar-logo-wrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3rem;
  bottom: -3rem;
  background: var(--metropol-black);
  clip-path: polygon(50% 40%, 0 0, 100% 0);

  @media screen and (min-width: 1088px) {
      clip-path: polygon(50% 80%, 0 0, 100% 0);
  }

}

.navbar .navbar-brand img.is-header-logo {
  height: 100%;
  background-color: var(--metropol-black);
  padding: 2rem;
  min-height: 100%;
  position: relative;
}

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

  .navbar .navbar-brand .navbar-item a {
      display: inline-flex;
      height: 100%;
  }

  .navbar>.container {
      display: flex;
      width: 100%;
      min-width: 100%;
  }

  .navbar.ict-navbar {
      display: flex;
  }


  .navbar-brand {
      width: 100%;
  }

  .navbar-menu {
      top: 8.28rem;
      padding-top: 2rem;
  }

  .mega-menu-dropdown-container {
      margin: 0 !important;
      padding: .5rem 1.5rem;
      flex-wrap: wrap;
  }

  .mega-menu-dropdown-container>.column {
      padding-left: 0;
      padding-left: 0;
  }
}


/* Mega Menu Items */

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

  .navbar-item.mega-menu-item.is-active .navbar-dropdown,
  .navbar-item.mega-menu-item.is-hoverable:focus .navbar-dropdown,
  .navbar-item.mega-menu-item.is-hoverable:focus-within .navbar-dropdown,
  .navbar-item.mega-menu-item.is-hoverable:hover .navbar-dropdown {
      width: 100%;
      /* min-height: 60vh; */
      height: fit-content;
      max-height: 75vh;
      overflow: hidden;
      font-size: 1.143rem;
      /* padding-top: 2.714rem; */
      padding-top: 0;
      padding-bottom: 2.714rem;
  }

  li.sub-category-item {
      margin-bottom: 0.5rem;
  }

  .featured-content-wrapper {
      padding: 0.75rem;
  }


  /* Default navbar items brought into similar styling */
  .navbar-item.is-active .navbar-dropdown,
  .navbar-item.is-hoverable:focus .navbar-dropdown,
  .navbar-item.is-hoverable:focus-within .navbar-dropdown,
  .navbar-item.is-hoverable:hover .navbar-dropdown {
      font-size: 1.143rem;
      /* border-top: solid 1px var(--metropol-black); */
      width: 100%;
  }

  .mega-menu-dropdown-container {
      display: flex;
      margin-left: 18.52rem !important;
      margin-right: 5.71rem !important;
      height: 100%;
  }

  .sub-categories-outer-column>a.mega-menu-category {
      display: none;
  }

  .navbar-item.has-dropdown.mega-menu-item {
      position: static;
  }

  a.mega-menu-category,
  a.mega-menu-category {
      border: solid 2px transparent;
  }

  a.mega-menu-category:hover,
  a.mega-menu-category.is-active {
      background: var(--metropol-grey-highlight);
      /* border: solid 2px var(--metropol-black); */
      border-right: none;
      color: var(--metropol-orange);
  }

  a.mega-menu-category {
      padding: 0.75rem;
      position: relative;
  }

  a.mega-menu-category:hover:after,
  a.mega-menu-category.is-active:after {
      content: "";
      position: absolute;
      top: -2px;
      right: calc(-0.75rem - 2px);
      width: calc(0.75rem + 2px);
      background: var(--metropol-grey-highlight);
      height: 100%;
      box-sizing: content-box;
      border-top: solid 2px var(--metropol-grey-highlight);
      border-bottom: solid 2px var(--metropol-grey-highlight);
  }

  .sub-categories-outer-column,
  .featured-content-outer-column {
      background: var(--metropol-grey-highlight);
      /* border: solid 2px var(--metropol-black); */
  }

  .sub-categories-outer-column {
      border-right: none;
  }

  .featured-content-outer-column {
      border-left: none;
  }

  .columns.sub-category-group {
      margin: 0;
  }

  .mega-menu-dropdown-container>.column.featured-content-outer-column {
      padding: 1.5rem;
  }

  .sub-categories-outer-column {
      padding: 1.5rem;
  }

  .categories-list-outer-column {
      padding-top: 0;
  }
}

@media screen and (max-width:1087px) {
  .navbar-item:not(.is-active) .mega-menu-dropdown-container {
      max-height: 0 !important;
      padding: 0;

      .column,
      li,
      ul,
      a,
      span,
      h3 {
          max-height: 0 !important;
          padding: 0;
          margin: 0;
          font-size: 0;
      }

  }

  .categories-list-outer-column {
      display: none !important;
  }

  .sub-categories-outer-column .is-hidden {
      display: block !important;
  }

  .columns.is-multiline.sub-category-group {
      margin: 0;

      .column {
          padding: 0;
      }
  }

  .navbar-dropdown.mega-dropdown {
      font-size: 1.143rem;
  }

  h3.sub-category-title {
      margin-bottom: 0.25rem;
  }

  .navbar-item.is-active .columns.is-multiline.sub-category-group {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
  }

  .sub-category-group {
      font-size: 0.875em;
  }

  .sub-category-group>.column {
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
  }
}



.navbar-menu .navbar-start {
  flex: 1;
}



.mega-dropdown-category {
  display: flex;
  flex-wrap: wrap;

  &:hover,
  &:focus,
  &:focus-within,
  &.is-active {
      .mega-dropdown-sub-categories {
          opacity: 1;
          pointer-events: all;
          height: 100%;
      }
  }
}

/* 
.mega-dropdown-category .mega-dropdown-sub-categories {
  transition: 0.2s;
  opacity: 0;
  pointer-events: none;
} 
a.mega-dropdown-category-title {
  width: 33.33333%;
  display: flex;
  height: auto;
}

.mega-dropdown-category .mega-dropdown-sub-categories {
  width: 30%;
  position: absolute;
  left: 33.33333%;
  top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
  max-height: calc(70vh - 2rem);
} 

.mega-dropdown-sub-category {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 1rem;
  width: 33.33333%;
}
*/
h4.subtitle.sub-category-title {
  margin-bottom: 0;
  font-size: 1.75rem;
}

.navbar-dropdown.mega-dropdown {
  border: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* .mega-menu-dropdown-container>.column {
  padding-top: 0;
  padding-bottom: 0;
} */

.featured-content-image img {
  object-fit: contain;
  max-height: 25rem;
}

@media only screen and (min-width: 1088px) {
  ul.sub-category-items:not(.featured-content-wrapper *) {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 500px;
      gap: 15px;
  }
}
/* .sub-category-item .featured-content-source-wrapper {
  display: none;
} */

a.mega-menu-category {
  font-weight: initial;
}

h3.sub-category-title {
  font-weight: bold;
  margin-bottom: 1rem;
}

.sub-category-link,
.featured-content-title {
  transition: 0.2s;

  &:hover {
      color: var(--metropol-orange);
  }
}

.image.featured-content-image {
  margin-bottom: 3rem;
}

.featured-content-title h3 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.featured-content-outer-column .sub-category-title {
  display: none;
}

.featured-content-outer-column .column {
  padding: 0;
}

.featured-content-outer-column .sub-category-group .column {
  width: fit-content;
}

@media screen and (max-width:1087px){
  h3.sub-category-title {
      margin-bottom: 0.5rem;
      margin-top: 1rem;
  }
  
  li.sub-category-item {
      margin-bottom: 0.5rem;
  }

}
@media screen and (min-width: 1472px) {
  .page-home-index .container-special, .page-home-index .catfish-container, .page-home-index .container {
    max-width: 100%;
}
}
@media screen and (min-width: 1920px) {
  .page-home-index .container-special, .page-home-index .catfish-container, .page-home-index .container {
      max-width: 1920px;
  }
  #main-nav >  .container {
    max-width: 100%;
  }
}

.homeFeaturedCategoriesWrapper {
  background-color: #171619;
  color: #fff;
  padding-top: 3rem;
}
.homeFeaturedCategoriesWrapper h3.title {
  text-align: left !important;
  margin-bottom: 3rem;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item {
  border-top: none;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item:after {
  display: none;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item * {
  display: block !important;
  position: relative;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item {
  display: flex !important;
  flex-wrap: wrap;
  position: relative !important;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title a {
  color: #ffffff;
  font-size: 1.728em;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title {
  order: 2;
  transition: none;
  position: relative;
  background: transparent !important;
  color: #fff !important;
  text-align: left;
  padding-left: 0;
  transform: none !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .picture {
  order: 1;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item  .category-short-description {
  order: 3;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item a.homepage-category-details-button {
  order: 4;
  color: #fff;
  background: #DB4C33;
  border-radius: 0;
  border-width: 1px;
  cursor: pointer;
  justify-content: center;
  padding-top: calc(0.375em - 1px);
  padding-bottom: calc(0.375em - 1px);
  white-space: nowrap;
  padding-left: 1.42857rem;
  padding-right: 1.42857rem;
  text-align: center;
  line-height: 2.4rem;
  font-size: 1.2rem;
  margin-top: 1.5rem;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .picture .image {
  height: 0px;
  padding-bottom: 80%;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .picture img {
  position: absolute!important;
}
.arone-category-page .category-intro-wrapper {
  display: none;
}
.subcategory-with-products-wrapper .section:nth-child(2n) * {
  color: white;
}
.subcategory-with-products-wrapper .section:nth-child(2n) {
  background: #171619;
  color: #fff;
}
.productlistproductdetailbutton {
  border:none;
}

/* Primary interaction buttons */

.productlistproductdetailbutton,
.arone-product-landing-page .action-button-wrapper .catfish-button,
.multipartUi-V2-Footer .button.is-primary,
.shoppingcart__wrapper .cart-footer .checkout-buttons .checkout-buttons__wrapper .catfish-button.checkoutbutton,
.one-page-checkout .buttons button.paymentmethodnextstepbutton.catfish-button, 
.one-page-checkout .buttons button.shippingmethodnextstepbutton.catfish-button, 
.one-page-checkout .buttons button.newaddressnextstepbutton.catfish-button, 
.one-page-checkout .buttons button.paymentinfonextstepbutton.catfish-button, 
.one-page-checkout .buttons button.confirmordernextstepbutton.catfish-button {
  border:none;
  color: #fff;
  background: #DB4C33;
  border-radius: 8px !important;
}
.productlistproductdetailbutton:hover, 
.productlistproductdetailbutton:focus,
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item a.homepage-category-details-button:hover,
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item a.homepage-category-details-button:focus,
.arone-product-landing-page .action-button-wrapper .catfish-button:hover,
.arone-product-landing-page .action-button-wrapper .catfish-button:focus,
.multipartUi-V2-Footer .button.is-primary:hover,
.multipartUi-V2-Footer .button.is-primary:focus,
.shoppingcart__wrapper .cart-footer .checkout-buttons .checkout-buttons__wrapper .catfish-button.checkoutbutton:hover,
.shoppingcart__wrapper .cart-footer .checkout-buttons .checkout-buttons__wrapper .catfish-button.checkoutbutton:focus,
.one-page-checkout .buttons button.paymentmethodnextstepbutton.catfish-button:hover, 
.one-page-checkout .buttons button.shippingmethodnextstepbutton.catfish-button:hover, 
.one-page-checkout .buttons button.newaddressnextstepbutton.catfish-button:hover, 
.one-page-checkout .buttons button.paymentinfonextstepbutton.catfish-button:hover, 
.one-page-checkout .buttons button.confirmordernextstepbutton.catfish-button:hover,
.one-page-checkout .buttons button.paymentmethodnextstepbutton.catfish-button:focus, 
.one-page-checkout .buttons button.shippingmethodnextstepbutton.catfish-button:focus, 
.one-page-checkout .buttons button.newaddressnextstepbutton.catfish-button:focus, 
.one-page-checkout .buttons button.paymentinfonextstepbutton.catfish-button:focus, 
.one-page-checkout .buttons button.confirmordernextstepbutton.catfish-button:focus {
  background: #a53b28;
  
}
.buttons .ui-button, .buttons .catfish-button, .buttons .button, .button, .homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item a.homepage-category-details-button {
  border-radius: 8px !important;
}
.product-item--image .picture img, .category-item .picture img {
  border-radius: 10px!important;
}

@media screen and (min-width: 1088px) {
  .navbar, .header-spacer, .navbar .navbar-brand img.is-header-logo {
    transition: all ease 0.3s;
}

.navbar.small-nav .navbar-brand img.is-header-logo { 
  padding: 0rem;
}
  .navbar.small-nav, .header-spacer.small-nav {
      height: 7rem!important;
  }
  .navbar>.container>.navbar-brand {
    margin-right: 4rem;
    transition: all ease 0.3s;
  }
  .navbar.small-nav>.container>.navbar-brand {
    margin-right: 1rem;
  }
  div#main-navbar {
    font-size: 1.2rem;
  }
  .small-nav div#main-navbar {
    font-size: 1rem;
  }
  .navbar.small-nav a.navbar-link.my-account-dropdown-link + .navbar-dropdown a {
    font-size: 1rem !important;
  }
  
}
.box, .catfish-button.is-light, .button.is-light, .is-background-light,.shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row {
  background-color: #f4f4f4;
}
.is-background-light {
  background-color: #f4f4f4!important;
}
td.cart--actions {
  max-width: 14rem;
}

@media screen and (max-width: 1088px) {
  .navbar .navbar-brand img.is-header-logo { 
    padding: 0rem!important;
  }
  .navbar>.container>.navbar-brand {
    margin-right: 2rem;
}
}

.product-variant-line > .picture {
  display: none;
}
.arone-product-landing-page .product-info-section > .container > .columns {
  justify-content: space-evenly !important;
}
.arone-product-landing-page .product-info-section > .container > .columns > .column {
  max-width: 60rem;
}
.thumb.column.product-picture {
  max-width: 10rem;
  overflow: hidden;
  border-radius: 20px;
}
.bigpicture.column.is-12.is-relative {
  overflow: hidden;
  border-radius: 5%;
}
.type_Info .attribute-item {
  display: none;
}
.type_Info .attributeDescription {
  padding-top: 0.75rem;
}
.attributeDescription > .button {
  min-width: 100%;
}