* {
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
}

.bn-bg-main {
  background-color: #FFDFCD;
}

.bn-bg-gray {
  background-color: #E2E2E2;
}

.bn-bg-braun {
  background-color: #AB7A5B;
}

.bn-bg-gray-2, body#checkout section.checkout-step {
  background-color: #F1EBE8;
}

.bn-text-2 {
  font-family: 'Barlow Semi Condensed', 'Barlow', Arial, Helvetica, sans-serif;
}

.bn-text-brandon {
  font-family: 'Brandon', 'Barlow Semi Condensed', 'Barlow', Arial, Helvetica, sans-serif;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#wrapper {
  flex-grow: 1;
}

main, .tabs {
  background: #F1EBE8 !important;
}

h1 {
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  font-family: "Barlow Semi Condensed";
}

.btn-main,
body#checkout #verifyCreneau,
body#checkout .btn {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  width: 100%;
  padding: 0rem 10px;
  font-weight: 500;
  margin-top: 1rem;
  height: 50px;
  line-height: 50px;
  background: #000;
  border: none;
  max-width: 350px;
  transition: all .2s ease-in;
  text-transform: uppercase !important; /* justified importants - Reset default PS transformations, colors, changing on some states... */
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}

body#product .btn-main {
  max-width: 100%;
}

.btn-main.disabled,
.btn-main.disabled:hover,
body#checkout #verifyCreneau.disabled,
body#checkout #verifyCreneau.disanled:hover {
  cursor: not-allowed;
  background-color: #000;
  opacity: 0.7;
}

body#checkout #verifyCreneau:hover,
body#checkout #verifyCreneau:active,
body#checkout #verifyCreneau:focus,
.btn-main.colorize:hover,
.btn-main.colorize:active,
.btn-main.colorize:focus {
    background-color: #B47855;
}

.form-control:focus {
  outline: none;
  border: 1px solid #B47855;
}

#authentication #content {
  background: none;
}

#authentication .breadcrumb {
  display: none;
}

/* Remove PS "blue" hover on every links */
a:hover,
#header a:hover,
#header .top-menu a[data-depth="0"]:hover {
  color: inherit;
}

/* Wrapper */
#wrapper {
  background: #F1EBE8 !important;
  padding-top: 4px;
}

/* Header */
#header {
  box-shadow: none;
  position: sticky;
  top: 0;
}

#header .header-top {
  background-color: #F1EBE8;
}

#wrapper {
  padding-top: 30px;
}

@media(min-width: 1280px) {
  #header {
    position: absolute;
    top: 0;
  }
  #header .header-top {
    position: absolute;
    left: 0;
    width: 100vw;
    background-color: transparent;
  }
}

#header .logo {
  max-width: 50px;
}

#header .menu {
  width: 100%;
  display: flex;
  justify-content: center;
}

#header .header-top .menu {
  padding-left: 0px;
}

#header .menu .top-menu {
  margin: 0 auto;
}

#header .menu .top-menu .dropdown-item {
  padding-top: 0;
  padding-bottom: 0;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Brandon', Arial, Helvetica, sans-serif;
}

@media (max-width: 1280px) {
  #header .header-top {
    background: #AB7A5B;
  }
}

#header {
  background: #AB7A5B;
}

#header-container {
  background: #F1EBE8;
}

#_add_to_cart_header {
  transform: translateY(-100%);
  transition: transform .5s ease-in;
}

#_add_to_cart_header.display-notification {
  transform: translateY(0) !important;
}

#_add_to_cart_header a:active,
#_add_to_cart_header a:focus {
  color: #000;
}

/* Footer */
footer:not(footer.page-footer, footer.form-footer),
body#checkout #footer {
  background-color: #e2e2e2;
}

footer.page-footer .account-link {
  font-size: 13px;
  color: inherit;
  font-weight: 400;
}

footer.page-footer .account-link span {
  font-family: 'Barlow Semi Condensed';
}

footer .links ul li a,
footer #copyright {
  font-size: 16px;
  color: #000;
  font-weight: 200;
  display: block;
}

footer .links ul li a {
  margin-bottom: 5px;
}

footer .links ul li a:hover {
  color: #B47855;
}

/* Override a little margin we don't want just above the footer */
#main .page-footer {
  margin-bottom: 0 !important;
}

/* Breadcrumb */
.breadcrumb {
  text-transform: lowercase;
}

.breadcrumb * {
  color: #7A7A7A;
  font-family: 'Barlow Semi Condensed', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/* Override of search bar default style */
.mobile-search #search_widget {
  width: 100%;
  margin-bottom: 0px;
}

.mobile-search #search_widget form input:focus {
  width: 100% !important;
}

/* Hide default search icon */
.search-widgets i {
  display: none;
}

#search_widget form {
  display: flex;
  justify-content: end;
  overflow: hidden;
  margin: 0 auto;
}

#search_widget form input {
  display: flex;
  background-color: transparent;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: 10px;
  text-transform: uppercase;
  font-size: 12px;
}

/* Dropdown search results  */
.jolisearch-product .product-name {
  word-break: break-word;
  font-family: 'Barlow Semi Condensed', Arial, Helvetica, sans-serif;
  font-weight: bold !important;
}

.jolisearch-product .product-price {
  display: none
}

.jolisearch-content .product-image {
  padding: 20px !important;
  background: #F2F2F4;
}

.ui-menu.ui-jolisearch .jolisearch-body section[role="main"] .items-count {
  background-color: #FFDFCD;
  color: #000;
  margin-left: 5px;
}

.ui-menu.ui-jolisearch .jolisearch-body section[role="main"] .product:hover,
.ui-menu.ui-jolisearch .jolisearch-body section[role="main"] .more-results a:hover {
  background: none;
  border: 1px solid #FFFFFF;
}

.ui-menu.ui-jolisearch .jolisearch-body section[role="main"] .product-name {
  color: #000;
  text-transform: uppercase;
}

/* "Show all results" link */
.ui-menu.ui-jolisearch .more-results a {
  font-family: 'Barlow Semi Condensed', Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  color: #000 !important;
  font-size: 16px !important;
}

.ui-menu.ui-jolisearch .more-results a:hover {
  text-decoration: underline;
}

/* Remove border from mobile menu items */
#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
  border: none;
  font-family: 'Brandon', Arial, Helvetica, sans-serif;
  color: black;
}

#mobile_top_menu_wrapper .top-menu li {
  padding: 1rem;
}

#mobile_top_menu_wrapper {
  transform: translateX(-100%);
  transition: transform ease-in .5s;
  min-width: 300px;
  /*margin-left: 1px;*/
  padding-top: 30px;
  padding-bottom: 30px;
  overflow-y: auto
}

.display-mobile-menu {
  transform: translateX(0) !important;
}

#_black_overlay {
  opacity: 0;
  transition: opacity ease-in-out .4s;
}

.visible {
  opacity: 1 !important;
}

#wrapper,
#notifications,
#footer {
  display: block !important;
}

/* Auth / Register */
.page-authentication #content {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-authentication a:focus {
  text-decoration: none !important;
  color: inherit;
  outline: none;
}

.register-form label.form-control-label {
  margin-top: 7px;
  font-size: 16px;
  color: #414141;
  font-weight: 400;
}

.register-form .required::after,
#checkout .required::after {
  content: '*';
  color: red;
}

.form-control {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.25;
  border-radius: .25rem;
  color: black;

  background: #FFFFFF;
  border: 1.5px solid #B47855;
  min-height: 44px;
  padding: 10px 10px !important;
}

.row.delivery-option.js-delivery-option {
  border: 1px solid #777 !important
}

.row.delivery-option.js-delivery-option:has(input:checked) {
  border: 1px solid #B47855 !important
}

.pwd-pattern-check-group {
  display: block;
  margin-top: 20px;
}

.pwd-pattern-check-item {
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin: 0px 10px 10px 0px;
  font-size: 12px;
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
  background: #eeeeee;
  color: #000;
  font-weight: 600;
}

.pwd-pattern-check-item.pwd-pattern-valid {
  background: #00b16a;
  color: #fff;
}

.custom-radio input[type="radio"]:checked+span {
  background-color: #B47855;
}

.page-my-account #content .links a span.link-item {
  font-size: 14px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  font-family: 'Barlow Semi Condensed';
}

#identity #main {
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
  max-width: 1500px;
}

@media (max-width: 767px) {
  .footer-container .links {
    margin-left: 1.5rem;
  }

  .footer-container .links ul {
    background-color: transparent;
  }

  .footer-container .links ul>li {
    border-bottom: 0;
    padding: 0;
  }
}

@media (min-width: 992px) {
  #js-checkout-summary {
    display: block
  }
}

@media (min-width: 1024px) {
  .page-authentication #content {
    max-width: 1500px
  }
}


@media (max-width: 1279px) {

  #header .header-top .menu,
  .header-top #search_widget {
    display: none;
  }
}

/* >= 1280px -- xl: */
@media (min-width: 1280px) {
  .header-top #search_widget {
    display: none;
  }
}

/* >= 1536px -- 2xl: */
@media (min-width: 1536px) {
  h1 {
    font-size: 35px;
  }

  .header-top #search_widget form input {
    opacity: 1;
    width: 0px;
    padding-left: 0;
    padding-right: 0;
    transition: width ease-in .3s;
  }

  .header-top #search_widget {
    display: flex;
  }

  .header-top #_desktop_search:hover+#search_widget form input,
  .header-top #search_widget:hover form input,
  .header-top #search_widget form input:focus {
    opacity: 1;
    width: 200px
  }

  #search_widget {
    min-width: 1px;
    max-width: 10rem !important;
  }

  #search_widget form {
    margin: 0;
  }
}

/* >= 1920px -- like a 3xl: */
@media (min-width: 1920px) {
  #header .menu .top-menu .dropdown-item {
    font-size: 18px;
    padding-left: 25px;
    padding-right: 25px;
  }

  #header .menu .top-menu .dropdown-item {
    font-size: 18px;
  }
}

/* Header variations */
#header-container :is(.header-top-banner, #header-content, #logo-header) {
  transition: all .5s ease;
}

#header-content {
  position: relative;
}

  #header-content,
  .header-top {
    /*padding-top: 105px;*/
    height: 105px;
  }

#header-content #logo-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media(min-width: 1280px){
  .h-collapsed #header-content {
    padding-top: 0;
  }

  .h-collapsed .header-top-banner {
    margin-bottom: 0!important;
  }

  .h-collapsed #logo-header {
    top: -50px;
  }
}

#checkout .header-top-banner {
  margin-bottom: 0px !important;
}

#checkout #logo-header {
  width: 100% !important;
  padding: 15px 0px;
}


#logo-bn-short {
  display: block;
  opacity: 0;
  transition: opacity .5s ease-in;
}

#logo-bn-short .visible {
  opacity: 100;
}

/* Limited functionality (dec 2024) */