/**
 * Occasio GmbH - Navigation Styles
 * Extrahiert aus: https://temp-exueafkcrubrhqxrjozj.webadorsite.com/
 */

/* ============================================================
   BASE STRUCTURE
   ============================================================ */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* ============================================================
   HEADER STYLES
   ============================================================ */

/* Main Header Container */
.jw-header {
  float: left;
  position: relative;
}

/* Header Logo */
.jw-header-logo {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  position: relative;
}

/* Header Image Container */
.jw-header-image-container {
  flex-shrink: 1;
  min-width: 30px;
  position: relative;
}

.jw-header-image-container .jw-header-image {
  display: block;
  height: auto;
  max-width: 100%;
}

.jw-header-image-container.is-resizing {
  flex-shrink: 1;
}

/* Header Image Toggle */
.jw-header-image-toggle > a {
  display: block;
  width: 100%;
}

/* Header Title */
.jw-header-title {
  outline: none;
}

/* Header Text & Slogan */
.jw-header-text,
.jw-header-slogan {
  font-family: "Merriweather", serif;
  font-size: 3.5rem;
  line-height: 1.5rem;
  color: #b2b2b2;
}

/* Header Toggler */
#jw.jw-header-toggler {
  bottom: -5px;
  position: absolute;
  z-index: 2120;
}

#jw.jw-header-toggler .btn-group {
  white-space: nowrap;
}

#jw.jw-header-toggler .btn-group:after,
#jw.jw-header-toggler .btn-group:before {
  content: " ";
  display: table;
}

#jw.jw-header-toggler .btn-group:after {
  clear: both;
}

#jw.jw-header-toggler .btn-group > .btn {
  float: none;
}

/* Header Buttons */
#jw .jw-header-button {
  display: none;
  position: absolute;
}

#jw .jw-header-button--desktop {
  right: -10px;
  top: -10px;
}

#jw .jw-header-button--mobile {
  margin-left: -10px;
  top: 0;
}

.jw-element-is-active #jw .jw-header-button {
  display: block;
}

/* Header Loader */
#jw .jw-header-loader {
  display: none;
}

.jw-element-is-loading #jw .jw-header-loader {
  display: flex;
}

/* ============================================================
   MOBILE HEADER STYLES
   ============================================================ */

.jw-mobile-header {
  background: #333333;
  display: flex;
  justify-content: center;
  padding: 10px;
  max-height: 70px;
}

.jw-mobile-text {
  color: #ffffff;
  font-size: 3rem;
  text-overflow: ellipsis;
}

/* Hide header on mobile */
.jw-menu-is-mobile .jw-header {
  display: none;
}

/* ============================================================
   NAVIGATION MENU STYLES
   ============================================================ */

/* Main Menu Container */
.jw-menu {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-family: "Lato", "sans-serif";
  line-height: 1.5;
  text-transform: uppercase;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menu Items */
.jw-menu-item {
  list-style: none;
}

.jw-menu-link {
  color: #707972;
  background: transparent;
  text-decoration: none;
  display: block;
  padding: 0.4rem 0.6rem;
  transition: all 0.2s ease;
}

/* Hover State */
.jw-menu-link:hover,
.jw-menu-item:hover > .jw-menu-link {
  color: #2CAA7B;
  background: rgba(44, 170, 123, 0.05);
}

/* Active State */
.jw-menu-is-active > .jw-menu-link,
.js-active-menu-item {
  color: #2CAA7B;
  background: rgba(44, 170, 123, 0.05);
}

/* ============================================================
   HORIZONTAL MENU LAYOUT (Desktop)
   ============================================================ */

.jw-menu-horizontal {
  flex-direction: row;
  justify-content: center;
}

.jw-menu-horizontal > .jw-menu-item {
  display: inline-flex;
}

/* ============================================================
   VERTICAL MENU LAYOUT
   ============================================================ */

.jw-menu-vertical {
  flex-direction: column;
}

.jw-menu-vertical > .jw-menu-item {
  display: flex;
}

/* ============================================================
   SUBMENU STYLES
   ============================================================ */

.jw-submenu {
  display: none;
  background: #c4c4c4;
}

/* Desktop Submenu */
.jw-menu-is-desktop .jw-submenu {
  position: absolute;
  z-index: 1020;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Horizontal Menu Submenu */
.jw-menu-horizontal > .jw-menu-item > .jw-submenu {
  top: 100%;
  left: 0;
}

/* Vertical Menu Submenu */
.jw-menu-vertical > .jw-submenu > .jw-menu-is-overflowing > .jw-submenu {
  left: auto;
  right: 100%;
}

.jw-menu-vertical > .jw-menu-item > .jw-submenu {
  left: 100%;
  top: 0;
}

/* ============================================================
   SUBMENU ARROW INDICATORS
   ============================================================ */

/* Arrow for sub-items */
.jw-menu-item-has-children > .jw-menu-link:after {
  content: '▸';
}

/* Arrow for top-level horizontal menus */
.jw-menu-horizontal > .jw-menu-item-has-children > .jw-menu-link:after {
  content: '▾';
}

/* ============================================================
   MOBILE MENU STYLES
   ============================================================ */

.jw-menu-is-mobile .jw-submenu {
  background: transparent;
  position: static;
}

.jw-menu-is-mobile .jw-menu-item {
  display: list-item;
  width: 100%;
}

/* Mobile Menu Arrows */
.jw-menu-is-mobile .jw-menu-item-has-children > .jw-menu-link:after {
  content: '▼';
}

.jw-menu-is-mobile .jw-menu-item-has-children.jw-menu-is-open > .jw-menu-link:after {
  content: '▲';
}

/* Mobile Menu Clone (Overlay) */
.jw-menu-clone {
  position: absolute;
  z-index: 1009;
  min-height: calc(100vh - 50px);
  background: #FFFFFF;
  box-shadow: 0 0 0 2000vh rgba(0, 0, 0, 0.2);
}

/* Collapsed States with Transitions */
.jw-menu-collapsed {
  opacity: 0;
  transform: translate(0, -200px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.jw-menu-expanded {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   MOBILE BAR (Bottom Navigation)
   ============================================================ */

.mobile-bar {
  display: none;
  flex-direction: row;
  font: 13px Proxima Nova, Segoe UI, Arial, sans-serif;
  height: 75px;
  justify-content: center;
  list-style: none;
  padding: 0 10px;
}

.jw-is-mobile-bar-editing .mobile-bar {
  display: flex;
}

.mobile-bar__item {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 50px;
  transition: background .2s ease;
}

.mobile-bar__item,
.mobile-bar__item:hover {
  text-decoration: none;
}

.mobile-bar__item-icon {
  font-size: 1.4em;
  line-height: 1;
}

.mobile-bar__item-label {
  font-size: .9em;
  line-height: 1;
  padding-top: .4em;
}

.jw-mobile-bar-container {
  order: 1;
}

/* ============================================================
   CART & WISHLIST STYLES
   ============================================================ */

.jw-menu-cart-item,
.jw-mobile-cart {
  display: none;
}

.jw-menu-is-desktop .jw-menu-cart-item {
  display: block;
}

.jw-menu-is-mobile .jw-mobile-cart {
  display: block;
  margin-bottom: 1em;
  position: relative;
}

.jw-menu-cart-item--hidden {
  display: none !important;
  margin: 0 !important;
}

.jw-menu-cart-item--hidden .jw-popover-container {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.jw-menu-cart-item--hidden .jw-menu-link,
.jw-menu-cart-item--hidden .jw-popover,
.jw-menu-cart-item--hidden .jw-popover-backdrop {
  display: none !important;
}

.jw-mobile-header-cart--hidden .jw-icon-badge-wrapper {
  visibility: hidden;
}

.jw-menu-wishlist-item--hidden {
  display: none !important;
}

/* ============================================================
   SECTION MENU STYLES
   ============================================================ */

.jw-section-menu {
  margin-bottom: 1em !important;
}

.jw-section-menu-title {
  word-wrap: break-word;
  margin-top: 0 !important;
}

.jw-section-menu-list {
  margin: 0;
  padding: 0;
}

.jw-section-menu-list li {
  list-style: none;
  margin-bottom: .1em;
}

.jw-section-menu-list li:before {
  content: "\00bb";
  margin-right: .3em;
}

.jw-section-menu-list-item.jw-section-menu-is-active {
  font-weight: 700;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Hidden States */
.hidden-desktop-horizontal-menu {
  display: none;
}

.jw-menu-is-mobile .hidden-desktop-horizontal-menu,
.jw-menu-vertical .hidden-desktop-horizontal-menu {
  display: inline;
}

/* Touch Device Adjustments */
.jw-is-touch-device .jw-menu-add {
  display: none;
}

/* Menu Add Button (in editor) */
.jw-menu-add {
  display: none;
  height: 30px;
  margin-top: -15px;
  position: absolute;
  right: -35px;
  top: 50%;
  width: 30px;
  z-index: 1;
}

.jw-menu-vertical .jw-menu-add {
  margin-top: 5px;
  right: auto;
  top: 100%;
}

/* Spacing Classes */
.jw-menu-spacing--editor-bar {
  padding-bottom: 50px !important;
}

.jw-menu-spacing--mobile-bar {
  padding-bottom: 75px !important;
}

.jw-menu-spacing--editor-bar.jw-menu-spacing--mobile-bar {
  padding-bottom: 125px !important;
}

/* ============================================================
   MEDIA QUERIES & BREAKPOINTS
   ============================================================ */

@media (max-width: 768px) {
  :root,
  :host {
    --jw-scale: .85416667;
  }
}

@media (max-width: 639px) {
  .jw-mobile-header--image .jw-mobile-text,
  .jw-mobile-header--image-text .jw-mobile-logo--landscape ~ .jw-mobile-text {
    display: none;
  }
}

@media (max-width: 450px) {
  .mobile-bar {
    display: flex;
  }

  .jw-website-spacer--mobile-bar {
    height: 75px;
  }
}

@media (max-width: 450px) and (max-height: 440px) {
  .jw-website-spacer--mobile-bar,
  .mobile-bar {
    display: none;
  }
}

@media (max-width: 960px) {
  .message-bar {
    order: -1;
  }
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
  --jw-scale: 1;
}