/*****************************************************************************************************
* Design Module: General CSS
******************************************************************************************************/

/*
Togglebox
---------------------------------------------------------------------------------------------------- */

/* Togglebox: General
--------------------------------------------- */

/* Defaults */

.bub-togglebox__trigger {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bub-togglebox__trigger-child {
  background: transparent;
  border: none;
  font-weight: normal;
  margin: 0;
  outline: none;
  padding: 0;
  text-transform: none;
}

/* Button inside heading trigger children: looks like the heading text. */

.bub-togglebox__button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  word-spacing: inherit;
}

.bub-togglebox__indicator,
.bub-togglebox__indicator.dashicons {
  display: inline-flex;
  flex-direction: column;
  font-size: inherit;
  height: initial;
  justify-content: center;
  opacity: 0.9;
  position: relative;
  text-decoration: none;
  top: 1px;
  width: initial;
}

.bub-togglebox__indicator.dashicons-minus {
  font-weight: bold;
  top: 0;
}

.bub-togglebox__content {
  outline: none;
}

/* Tall Content Styles */

.bub-togglebox__content.tall {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
  position: relative;
}

  /* Exceptions */

.bub-rel-parties__content.tall,
.bub-product-groups__content.tall {
  max-height: none;
}


/* Togglebox: Content Box
--------------------------------------------- */

/* A light rule above each section, its title a label in small spaced
   capitals. The space around the label belongs to the trigger, which makes
   the whole row the click target, with as much space below the label as
   above it. */

.bub-togglebox.bub-togglebox--cb {
  border-top: 1px solid var(--body-background-dk2);
  clear: both;
  margin: 24px 0 0;
}

.bub-togglebox--cb .bub-togglebox__trigger {
  font-size: 12px;
  font-weight: normal;
  margin: 0;
  padding: 22px 0;
}

.bub-togglebox--cb .bub-togglebox__trigger-child {
  border: none;
  color: var(--body-color-acc);
  font: var(--basic-font-def);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.bub-togglebox--cb .bub-togglebox__trigger-child span {
  margin: 0;
  padding: 0;
}

.bub-togglebox--cb .bub-togglebox__indicator {
  color: var(--body-color-acc);
  padding: 0 0.15em 0 0;
  top: 0px;
}

.bub-togglebox--cb .bub-togglebox__indicator::before {
  font: var(--fa-font-regular);
  font-size: 0.92em;
  content: '\f078';
  position: relative;
  top: 0.05em;
}

.bub-togglebox--cb.open .bub-togglebox__indicator::before {
  content: '\f077';
  top: 0.15em;
}

.bub-togglebox--cb .bub-togglebox__content {
  margin-bottom: 25px;
  margin-top: 0;
}

.bub-togglebox--cb .bub-togglebox__more {
  margin: 0.3em 0 0;
  padding-top: 0.5em;
}

/* The more link as an outline button, as on the pages (editing-block.css). */

.bub-togglebox--cb .bub-togglebox__more a {
  /* background: var(--theme2-background-def); */
  background: none;
  border: 1px solid currentColor;
  border-radius: 0;
  /* color: var(--theme2-color-def); */
  color: var(--body-color-def);
  display: table;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 12px 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.bub-togglebox--cb .bub-togglebox__more a:hover {
  /* filter: var(--theme2-filter-acc); */
  opacity: 0.85;
}


/*
Slick Carousel
---------------------------------------------------------------------------------------------------- */

/* Disable image links: the image types the lightbox opens (design-config.js),
   case-insensitive, with or without a query string. */

:where(.slick-slider) :is(
  a[href$=".jpg" i], a[href$=".jpeg" i], a[href$=".png" i], a[href$=".gif" i],
  a[href$=".webp" i], a[href$=".avif" i],
  a[href*=".jpg?" i], a[href*=".jpeg?" i], a[href*=".png?" i], a[href*=".gif?" i],
  a[href*=".webp?" i], a[href*=".avif?" i] ) {
  pointer-events: none;
  cursor: default;
}


/*
Swipebox (jQuery Plugin)
---------------------------------------------------------------------------------------------------- */

html.swipebox-html {
  overflow: hidden !important;
}

#swipebox-container #swipebox-slider .slide {
  /* Prevent image jumps due to position inline-block. */
  font-size: 0;
}

#swipebox-container #swipebox-top-bar,
#swipebox-container #swipebox-bottom-bar { 
  height: auto;
  min-height: 50px;
  /*transition-duration: 0s;*/
}

#swipebox-container #swipebox-top-bar {
  font-size: 15px;
}

#swipebox-container #swipebox-title {
  display: inline-block;
  line-height: 1.3;
  padding: 12px 5px 8px;
  width: calc(100% - 45px);
  vertical-align: middle;
}

#swipebox-container #swipebox-close {
  right: 0;
}

/* The pause and play button of the autoplay (design-config.js), centered
between the floating arrows: two bars while playing, a triangle while paused. */

#swipebox-container #swipebox-arrows {
  text-align: center;
}

#swipebox-container .bub-swipebox-play {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  padding: 0;
  vertical-align: top;
  width: 50px;
}

#swipebox-container .bub-swipebox-play:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -8px;
}

#swipebox-container .bub-swipebox-play::before {
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  box-sizing: content-box;
  content: '';
  display: inline-block;
  height: 16px;
  vertical-align: middle;
  width: 4px;
}

#swipebox-container .bub-swipebox-play--paused::before {
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
  border-right: none;
  border-top: 9px solid transparent;
  height: 0;
  margin-left: 4px;
  width: 0;
}