:root {
  /* Base color as HSL */
  --color-hue: 22;
  --color-sat: 90%;
  --color-light: 55%;
  --show-color: hsl(22, 90%, 55%);

  /* Variations */
  --storefront-primary: hsl(
    var(--color-hue),
    var(--color-sat),
    var(--color-light)
  );
  --storefront-primary-hover: hsl(var(--color-hue), var(--color-sat), 75%);
  --storefront-gradient-start: hsl(var(--color-hue), 60%, 75%);
  --storefront-gradient-end: hsl(var(--color-hue), var(--color-sat), 70%);
  --storefront-secondary-hover: hsl(var(--color-hue), 45%, 80%);
  --storefront-secondary: hsl(var(--color-hue), 10%, 90%);
}

/* things that need changed according to the store front colours
#btn-small-search {
    background-color: var(--storefront-primary);
}

.block-account-navigation ul a.active, .block-account-navigation ul a.is-active { background-color: var(--storefront-primary);}
.block-account-navigation ul a:hover {background-color: var(--storefront-secondary); }

.catfish-button.is-primary, .button.is-primary { background-color: var(--storefront-primary);}

.catfish-button, .button { background-color: var(--storefront-primary);}
.catfish-button:hover { background-color: var(--storefront-primary-hover);}


.navigationmenu ul li.active>a { background-color: var(--storefront-primary); color: #fff;}


#custom-product-item-transition {
  background-image: linear-gradient(to bottom, var(--storefront-gradient-start), var(--storefront-gradient-end)) !important;
}

.product-item--image {
  background-image: linear-gradient(to bottom, var(--storefront-gradient-start), var(--storefront-gradient-end)) !important;
}


input.productlistproductdetailbutton.showproductlandingpage.catfish-button.multi-selector-switch:hover {background-color: var(--storefront-secondary-hover) !important;}

/* end of things that need changed according to the store front colours */

.product-item--image {
  padding: 20px !important;
  background-color: #edf2f5;
  background-color: #ffffff;
  width: 100%;
  height: 100% !important;
}

.catfish-default-product-box .product-item--image .picture img {
  object-fit: contain;
}

.navigationmenu h6 {
  font-size: 0.95em;
}

.block.product-details-info {
  padding: 20px !important;
  background-color: #edf2f5;
  width: 100%;
  height: 100% !important;
}

.picture.columns.is-multiline.is-variable.is-1 {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 768px), print {
  .container-special,
  .catfish-container,
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (min-width: 768px), print {
  #logorow .navbar .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.navigationmenu {
  padding-top: 60px;
  padding-right: 40px;
}

section.category-intro-wrapper.section {
  display: none;
}

@media screen and (min-width: 1088px) {
  .nav-search-container.two-tier-search.is-active {
    /*transform:translatey(20.5rem)*/
    transform: translatey(133px);
  }
}

#recentlyViewedItems {
  display: none;
}

#checkout-step-shipping-method .notification {
  display: none !important;
}

#checkout-step-shipping-method
  .shipping-options__list
  .shipping-option-item:nth-of-type(2)
  .notification {
  display: block !important; /* visible again              */
  position: fixed; /* detach from the list       */
  top: 11rem; /* vertical offset tweak    */
  left: 1.5rem; /* gap from viewport edge     */
  width: 22rem; /* readable; adjust if needed */
  max-width: 90vw; /* stay inside small screens  */
  max-height: 50vh; /* scroll if the msg is long  */
  overflow: auto;
  margin: 0;
  z-index: 10000; /* always on top              */
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

.shopping-cart__product__images__item {
  padding: 20px !important;
  background-color: #edf2f5;
  width: 100%;
  height: 100% !important;
}

.producttags-box {
  display: none;
}

.category-subcategory-section {
  display: none;
}

.status-error__general {
  text-align: center;
}

.catfish-default-product-box {
  border: none !important;
}

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item {
  border: none;
  background-color: #ffffff;
  overflow: visible;
}

.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item
  .picture
  .image
  img {
  transform: scale(0.85);
  object-fit: contain;
  transition: transform 0.18s ease; /* optional */
}

/* when .image is hovered, remove the img transform */
.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item
  .picture
  .image:hover
  img {
  transform: scale(0.9);
}

.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item:hover
  .product-title {
  transform: translateY(100%);
  background: none;
}

.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item
  .product-title {
  background: none;
}

.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item
  .product-title:hover {
  background: none;
}

.homeFeaturedCategoriesWrapper
  .listWrapper
  .listItem
  .small-product-item
  .category-item
  .product-title
  a {
  font-size: 18px;
  font-weight: 600;
  color: #393939;
}

#homeFeaturedCategoriesTitleRow > h3 {
  text-align: left !important;
  font-weight: 600;
}

.catfish-container .topmenu {
  display: block; /* make each list item take full width */
}
.catfish-container .topmenu li {
  padding-bottom: 0px;
  padding-top: 3.5px;
}
.headermenu--workflownav {
  display: block; /* make each list item take full width */
  padding-top: 0 !important;
  padding-left: 10.5px;
  margin-bottom: 100px;
  background-color: transparent;
}
.block.block-account-navigation {
  padding-bottom: 0 !important;
}
.headermenu--workflownav .topmenu li a[href="/WorkInProgress"] {
  display: none;
}
.block.block-account-navigation {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 1086px) {
  .navbar-category-navigation .navigationmenu {
    max-height: 0;
    transition: all 0.3s;
    overflow: unset;
  }
  li.expandedListItem {
    transition: 0.5s;
    opacity: 1;
  }
}

h2.ict-title.title.has-text-left.is-2.has-text-primary.has-style-default.home-featured-categories-title {
  padding-top: 50px;
  padding-bottom: 20px;
}