/* theme styles - built from master_style.css */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* fonts */
  --font-size-base: 14px;
  --font-primary: "Open Sans", sans-serif;
  --font-title: "Roboto", sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* brand palette */
  --color-primary: #333f48;
  --color-secondary: #76b61a;
  --color-text: #333f48;
  --color-link: #333f48;
  --color-link-hover: #76b61a;
  --color-background: #ffffff;
  --color-border: #333f48;
  --color-white: #f8f8f8;
  --color-black: #505759;
  --color-info: #00558c;
  --color-success: #1e6f30;
  --color-warning: #e1cd00;
  --color-danger: #cf4646;

  /* general */
  --body-bg-color: var(--color-background);
  --body-text-color: var(--color-text);
  --title-font: var(--font-title);
  --title-color: var(--color-text);
  --title-font-weight: var(--font-weight-bold);
  --subtitle-font-weight: var(--font-weight-bold);
  --subtitle-font: var(--font-title);

  /* buttons and badges */
  --button-bg-color: var(--color-primary);
  --button-hover-bg-color: var(--button-bg-color);
  --button-text-color: var(--color-white);
  --button-font-weight: var(--font-weight-semibold);
  --button-text-transform: none;
  --button-border-width: 1px;
  --button-border-radius: 0px;
  --button-alt-bg-color: transparent;
  --button-alt-text-color: var(--color-text);
  --button-danger-bg-color: var(--color-danger);
  --button-danger-hover-bg-color: var(--button-danger-bg-color);
  --button-danger-text-color: var(--color-white);
  --button-secondary-bg-color: var(--color-primary);
  --button-secondary-text-color: var(--color-white);
  --badge-bg-color: var(--color-primary);
  --badge-text-color: var(--color-white);

  /* form fields */
  --input-border-color: var(--color-border);
  --required-marker-color: var(--color-danger);

  /* table */
  --table-border-color: var(--color-text);
  --table-header-text-color: var(--color-text);

  /* header */
  --navbar-bg-color: var(--color-background);
  --navbar-border-width: 0px;
  --navbar-border-color: var(--color-border);
  --navbar-link-color: var(--color-text);
  --navbar-link-hover-color: var(--color-link);
  --navbar-link-hover-decoration: none;
  --navbar-link-font-size: 0.9rem;
  --navbar-link-font-weight: var(--font-weight-semibold);
  --navbar-link-padding: 0.5rem 1.5rem;
  --navbar-logo-height: 2.9em;
  --navbar-dropdown-bg-color: var(--navbar-bg-color);
  --navbar-dropdown-link-color: var(--navbar-link-color);
  --navbar-dropdown-hover-bg-color: var(--color-primary);
  --navbar-dropdown-hover-link-color: var(--color-white);
  --navbar-mobile-bg-color: var(--navbar-bg-color);
  --navbar-mobile-link-color: var(--navbar-link-color);

  /* footer */
  --footer-bg-color: var(--color-primary);
  --footer-text-color: var(--color-white);
  --footer-border-width: 0px;
  --footer-border-color: var(--color-border);
  --footer-heading-color: var(--color-white);
  --footer-heading-font: var(--font-title);
  --footer-heading-font-size: 1.26rem;
  --footer-heading-font-weight: var(--font-weight-medium);
  --footer-heading-text-transform: none;
  --footer-link-color: var(--color-white);
  --footer-link-hover-color: var(--color-white);
  --footer-link-font-size: inherit;
  --footer-link-decoration: none;
  --footer-link-hover-decoration: underline;
  --footer-link-spacing: 8px;
  --footer-logo-height: 2.9rem;
  --footer-copyright-color: var(--footer-text-color);
  --footer-copyright-font-size: 0.875rem;

  /* homepage hero banner */
  --hero-title-font-size: 3.25rem;
  --hero-title-font-weight: var(--font-weight-black);
  --hero-text-font-size: 1.25rem;
  --hero-text-color: var(--color-text);
  --hero-link-color: var(--color-link);

  /* homepage categories and products */
  --featured-title-font-weight: var(--title-font-weight);
  --product-title-color: var(--color-link);
  --product-title-font-weight: var(--font-weight-bold);

  /* category page */
  --category-hero-title-color: var(--color-white);
  --category-sticky-bg-color: color-mix(
    in srgb,
    var(--color-background) 80%,
    transparent
  );

  /* about page */
  --about-link-color: var(--color-link);
  --about-link-hover-color: var(--color-link);

  /* cart, checkout and confirmation pages */
  --surface-bg-color: var(--color-white);
  --surface-border-radius: 0px;
  --checkout-step-title-font-weight: var(--font-weight-bold);
  --checkout-selected-border-color: var(--color-primary);
  --checkout-selected-icon-color: var(--color-text);

  /* editor page */
  --editor-top-bg-color: var(--color-white);
  --box-danger-bg-color: var(--color-danger);

  /* account and my orders pages */
  --account-nav-active-bg-color: var(--color-primary);
  --account-nav-active-text-color: var(--color-white);
  --orders-filter-active-bg-color: var(--color-primary);
  --orders-filter-active-text-color: var(--color-white);
  --orders-filter-bg-color: var(--color-background);
  --orders-filter-text-color: var(--color-primary);

  /* platform bridge */
  --brand-main-colors-and-font-primary-color: var(--color-primary);
  --brand-main-colors-and-font-secondary-color: var(--color-secondary);
  --brand-main-colors-and-font-text-primary-color: var(--color-text);
  --brand-main-colors-and-font-button-primary-color: var(--color-primary);
  --brand-main-colors-and-font-link: var(--color-link);
  --brand-main-colors-and-font-link-visited: var(--color-link);
  --brand-main-colors-and-font-background-color: var(--color-background);
  --brand-main-colors-and-font-primary-font: var(--font-primary);
  --brand-main-colors-and-font-title-and-subtitle-font: var(--font-title);
  --additional-colors-mega-edit-editor-top-bar: var(--color-primary);
  --additional-colors-mega-edit-editor-side-bar: var(--color-secondary);
  --additional-colors-mega-edit-editor-button: var(--color-white);
  --additional-colors-mega-edit-editor-primary: var(--color-primary);
  --additional-colors-mega-edit-editor-preview-background: var(
    --color-background
  );
  --additional-colors-mega-edit-editor-loading-background: var(
    --color-background
  );
  --additional-colors-catfish-editor-editor-top-bar: var(--color-primary);
  --additional-colors-catfish-editor-editor-side-bar: var(--color-secondary);
  --additional-colors-catfish-editor-editor-bottom-bar: var(--color-white);
  --advanced-status-colors-info: var(--color-info);
  --advanced-status-colors-success: var(--color-success);
  --advanced-status-colors-warning: var(--color-warning);
  --advanced-status-colors-danger: var(--color-danger);
  --advanced-status-colors-light: var(--color-white);
  --advanced-status-colors-dark: var(--color-black);
  --advanced-general-colors-background: var(--color-background);
  --advanced-border-color: var(--color-border);
  --advanced-border-hover: var(--color-border);
  --advanced-font-weight-normal: var(--font-weight-normal);
  --advanced-font-weight-medium: var(--font-weight-medium);
  --advanced-font-weight-semibold: var(--font-weight-semibold);
  --advanced-font-weight-bold: var(--font-weight-bold);
}

/* general */
html {
  font-size: var(--font-size-base) !important;
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-bg-color) !important;
  color: var(--body-text-color) !important;
}

.has-background-white {
  background-color: var(--body-bg-color) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-primary) !important;
}

.title,
.subtitle {
  color: var(--title-color) !important;
}

.title {
  font-family: var(--title-font) !important;
  font-weight: var(--title-font-weight) !important;
}

.subtitle {
  font-family: var(--subtitle-font) !important;
  font-weight: var(--subtitle-font-weight) !important;
}

/* buttons and badges */
.catfish-button,
.catfish-button.is-primary,
.button.is-primary {
  background: var(--button-bg-color) !important;
  color: var(--button-text-color) !important;
  font-weight: var(--button-font-weight) !important;
  text-transform: var(--button-text-transform) !important;
  border-width: var(--button-border-width) !important;
  border-radius: var(--button-border-radius) !important;
}

.catfish-button:hover,
.catfish-button.is-primary:hover,
.button.is-primary:hover {
  background: var(--button-hover-bg-color) !important;
}

.catfish-button.is-white,
.button.is-white {
  background: var(--button-alt-bg-color) !important;
  color: var(--button-alt-text-color) !important;
  border-radius: var(--button-border-radius) !important;
}

.catfish-button.is-danger,
.button.is-danger {
  background: var(--button-danger-bg-color) !important;
  color: var(--button-danger-text-color) !important;
  border-radius: var(--button-border-radius) !important;
}

.catfish-button.is-danger:hover,
.button.is-danger:hover {
  background: var(--button-danger-hover-bg-color) !important;
}

.badge {
  background-color: var(--badge-bg-color) !important;
  color: var(--badge-text-color) !important;
}

.catfish-default-product-box .add-info .pricerow .catfish-button:last-of-type {
  background: var(--button-secondary-bg-color) !important;
  color: var(--button-secondary-text-color) !important;
}

/* form fields */
.input,
.catfish-input,
.catfish-select,
.textarea,
.catfish-textarea {
  border-color: var(--input-border-color) !important;
}

.requiredMarker {
  color: var(--required-marker-color) !important;
}

/* table */
.table td,
.table th {
  border: 1px solid var(--table-border-color) !important;
}

.table thead td,
.table thead th {
  color: var(--table-header-text-color) !important;
}

/* header */
.navbar {
  background-color: var(--navbar-bg-color) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-border-color) !important;
}

a.navbar-item,
.navbar-link {
  color: var(--navbar-link-color) !important;
  font-weight: var(--navbar-link-font-weight) !important;
  text-transform: var(--navbar-link-text-transform) !important;
}

a.navbar-item:hover {
  color: var(--navbar-link-hover-color) !important;
  text-decoration: var(--navbar-link-hover-decoration) !important;
}

.navbar-item,
.navbar-link {
  padding: var(--navbar-link-padding);
  font-size: var(--navbar-link-font-size) !important;
}

.navbar-item img {
  max-height: var(--navbar-logo-height);
}

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

.navbar-burger span {
  background-color: var(--navbar-link-color) !important;
}

@media screen and (min-width: 1088px) {
  .navbar > .container .navbar-brand,
  .container > .navbar .navbar-brand {
    margin-left: -1.25rem;
  }

  ul.navigationmenu--categories li a {
    padding-right: 1rem;
  }

  .navbar-dropdown {
    background-color: var(--navbar-dropdown-bg-color) !important;
  }

  .navbar-dropdown a.navbar-item {
    color: var(--navbar-dropdown-link-color) !important;
  }

  .navbar-dropdown a.navbar-item:focus,
  .navbar-dropdown a.navbar-item:hover {
    background-color: var(--navbar-dropdown-hover-bg-color) !important;
    color: var(--navbar-dropdown-hover-link-color) !important;
    text-decoration: none !important;
  }
}

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

  .navbar-menu a.navbar-item,
  .navbar-menu .navbar-link,
  .ict-navbar span.mobile-dropdown-toggle {
    color: var(--navbar-mobile-link-color) !important;
  }

  .content-field-navbar .navbar-link:not(.is-arrowless)::after {
    border-color: var(--navbar-mobile-link-color) !important;
  }
}

/* footer */
.content footer ul {
  margin: 0px !important;
}

footer.arone-footer {
  background-color: var(--footer-bg-color) !important;
  color: var(--footer-text-color) !important;
  border-top: var(--footer-border-width) solid var(--footer-border-color) !important;
}

footer .subtitle {
  font-family: var(--footer-heading-font) !important;
  font-size: var(--footer-heading-font-size) !important;
  font-weight: var(--footer-heading-font-weight) !important;
  text-transform: var(--footer-heading-text-transform) !important;
  color: var(--footer-heading-color) !important;
}

footer .footer-column-content li {
  margin-bottom: var(--footer-link-spacing);
}
footer .footer-column-content li:last-child {
  margin-bottom: 0;
}

.arone-footer a {
  color: var(--footer-link-color) !important;
  font-size: var(--footer-link-font-size) !important;
  text-decoration: var(--footer-link-decoration) !important;
  text-transform: var(--footer-link-text-transform) !important;
}

.arone-footer a:hover {
  color: var(--footer-link-hover-color) !important;
  text-decoration: var(--footer-link-hover-decoration) !important;
}

.ict-dedicated-footer-column-1 {
  margin-bottom: 3rem;
}

@media screen and (max-width: 767px) {
  .ict-dedicated-footer-column-3 {
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 1088px) {
  .ict-dedicated-footer-column-1 {
    width: 55% !important;
  }

  .ict-dedicated-footer-column-2,
  .ict-dedicated-footer-column-3,
  .ict-dedicated-footer-column-4 {
    width: 15% !important;
  }
}

.image.dedicated-footer-logo img {
  height: var(--footer-logo-height) !important;
}

.footer-copyright {
  margin-top: 2rem;
}

.footer-copyright,
.footer-copyright h4 {
  color: var(--footer-copyright-color) !important;
}

.footer-copyright h4,
.footer-copyright h4 a {
  font-size: var(--footer-copyright-font-size) !important;
}

/* homepage hero banner */
.home-banner .title.is-1 {
  text-transform: var(--hero-title-text-transform) !important;
}

.home-banner .ict-paragraph p {
  color: var(--hero-text-color) !important;
}

.home-banner .ict-paragraph a {
  color: var(--hero-link-color) !important;
  text-decoration: underline;
}

@media screen and (min-width: 1088px) {
  .home-banner .columns .ict-image-column {
    padding-right: 1.5rem;
  }

  .home-banner .columns .ict-content-column {
    padding: 1.5rem;
  }

  .home-banner .title.is-1 {
    font-size: var(--hero-title-font-size);
    font-weight: var(--hero-title-font-weight) !important;
    line-height: 1.3;
  }

  .home-banner .ict-paragraph p {
    font-size: var(--hero-text-font-size);
  }

  .home-banner img {
    height: 100%;
  }
}

/* homepage categories and products */
.homeFeaturedProductsWrapper
  .listWrapper
  .listItem
  .item-box
  .catfish-default-product-box
  .product-title {
  text-align: center;
}

@media screen and (min-width: 768px), print {
  .homeFeaturedCategoriesWrapper .columns:not(.is-desktop):not(.is-widescreen),
  .homeFeaturedProductsWrapper .columns:not(.is-desktop):not(.is-widescreen) {
    justify-content: center;
  }

  .homeFeaturedCategoriesWrapper
    .listWrapper
    .listItem
    .small-product-item
    .category-item
    .product-title {
    transform: translateY(0%);
  }
}

@media screen and (min-width: 1088px) {
  .homeFeaturedCategoriesWrapper h3.title,
  .homeFeaturedProductsWrapper h3.title {
    text-align: center !important;
  }
}

.homeFeaturedCategoriesWrapper h3.title,
.homeFeaturedProductsWrapper h3.title {
  font-weight: var(--featured-title-font-weight) !important;
  text-transform: var(--featured-title-text-transform) !important;
}

.homeFeaturedCategoriesWrapper {
  padding: 3rem 0;
}

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item {
  border: 0 !important;
}

.product-title a,
.product-title a:hover {
  color: var(--product-title-color) !important;
  font-weight: var(--product-title-font-weight) !important;
  text-transform: var(--product-title-text-transform) !important;
}

/* category page */
.hero.is-primary .title {
  color: var(--category-hero-title-color) !important;
}

.arone-category-page .category-intro-wrapper {
  position: sticky;
  top: 10px;
  z-index: 10;
  background: var(--category-sticky-bg-color);
  padding-bottom: 1rem;
}

.arone-category-page .category-hero-section {
  position: sticky;
  top: 65px;
  z-index: 20;
  background-color: color-mix(in srgb, var(--color-primary) 95%, transparent);
}

/* about page style */
.about-hero .column {
  display: flex;
  flex-direction: column;
}

.about-hero .column .has-text-inherit {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.about-hero .column .is-inline-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.about-hero .column .ict-image {
  flex: 1;
  height: 100%;
}

.about-hero .column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-hemlock a {
  color: var(--about-link-color) !important;
  text-decoration: underline;
  font-weight: var(--font-weight-semibold) !important;
}

.about-hemlock a:hover {
  color: var(--about-link-hover-color) !important;
}

/* cart page */
.shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row {
  background: var(--surface-bg-color) !important;
  border-radius: var(--surface-border-radius) !important;
}

/* checkout pages */
.one-page-checkout .step-title h2 {
  font-weight: var(--checkout-step-title-font-weight) !important;
}

.one-page-checkout #opc-shipping_method .shipping-options {
  background: var(--surface-bg-color) !important;
  border-radius: var(--surface-border-radius) !important;
}

.one-page-checkout
  #opc-payment_method
  .payment-methods
  .payment-method__list
  .payment-method-item
  input:checked
  + label {
  border-color: var(--checkout-selected-border-color) !important;
}

.one-page-checkout
  #opc-payment_method
  .payment-methods
  .payment-method__list
  .payment-method-item
  input:checked
  + label:before {
  color: var(--checkout-selected-icon-color) !important;
}

.one-page-checkout
  #opc-payment_method
  .payment-methods
  .payment-method__list
  .payment-method-item
  input:checked
  + label:after {
  border-color: var(--checkout-selected-icon-color) !important;
  color: var(--checkout-selected-icon-color) !important;
}

/* confirmation page */
.checkout-additional-details,
.box,
.one-page-checkout .cartTableWrapper .cart tr.cart-item-row {
  background: var(--surface-bg-color) !important;
  border-radius: var(--surface-border-radius) !important;
}

/* editor page */
.editorTop.pane {
  background: var(--editor-top-bg-color) !important;
}

.box.is-danger {
  background: var(--box-danger-bg-color) !important;
}

/* account page */
.block-account-navigation ul a.active,
.block-account-navigation ul a.is-active {
  background-color: var(--account-nav-active-bg-color) !important;
  color: var(--account-nav-active-text-color) !important;
}

.account-page table.table-container tr .item-name label,
.block-account-navigation .title {
  font-family: var(--font-primary) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* my orders page */
.account-page--myorders .orders_v2 .order_All {
  background: var(--orders-filter-active-bg-color) !important;
  color: var(--orders-filter-active-text-color) !important;
  border-color: var(--orders-filter-active-bg-color) !important;
}

.account-page--myorders .order_toggle_filter.default {
  background: var(--orders-filter-bg-color) !important;
  color: var(--orders-filter-text-color) !important;
  border: 1px solid var(--orders-filter-text-color) !important;
}