/*****************************************************************************************************
* Product Single CSS: 'product' post type
******************************************************************************************************/

/* Entry Header
--------------------------------------------- */

.single-bub_product .entry-header {
  margin: 0;
}


/* Post Title Area
--------------------------------------------- */

.single-bub_product .bub-product-titlearea {
  margin: 0px 0 30px 0;
}

.single-bub_product .content h1.entry-title {
  margin: 0 0 0 0;
}

.bub-product-subtitle {
  font-size: 1.1em;
  line-height: 1.3;
  padding: 0.4em 0 0;
}

.bub-product-owners {
  font-size: 1.1rem;
  line-height: 1.3;
  padding: 0.7em 0 0;
}


/* Topinfo
--------------------------------------------- */

.bub-product-info .bub-product-details__content {
  font-style: italic;
  margin: 0 0 12px;
}

.bub-product-info .bub-product-details__content::first-letter {
  text-transform: uppercase;
}

.bub-product-info .bub-product-details__parties, 
.bub-product-info .bub-product-details__post-title, 
.bub-product-info .bub-product-details__subtitle {
  display: none;
}

.bub-product-info .bub-product-details__item::after {
  content: '. ';
}

.bub-product-info .bub-product-details__parties::after {
  content: ': ';
}

.bub-product-info .bub-product-details__sort::after {
  content: ', ';
}
  
/* Dot Exceptions */
  
.bub-product-info .bub-product-details__price::after,
.bub-product-info .bub-product-details__pricenote::after,
.bub-product-info .bub-product-details__date.bub-product-details__item:last-child::after {
  content: '';
}


/* Featured Image
--------------------------------------------- */

/* Featured Image: All */

.single-bub_product .featimg-flat {
  --bubjs-img-container-max-height: 520px;
  max-width: 400px;
}

.single-bub_product .featimg-3d {
  /* The 3D image version requires a custom property and related JS to
  set the max-height. */
  --bubjs-img-container-max-height: 520px;
  max-width: 400px;
  /* 3d is slightliy larger than flat. Make it match 
     the size of the flat image version. 
     Note: Some left padding is required as fix for
     Firefox (at least 1px) */
  padding: 20px 20px 30px 10px;
}

.single-bub_product .featimg-3d .featimg__caption {
  /* Overrides inline JS of featured image caption function
  in cross-fields.php. */
  display: none !important; 
}

/* Featured Image: Desktop (Sidebar Section) */

.single-bub_product .sidebar .featimg {
  margin: 40px auto 30px;
}

/* Featured Image: Mobile (Content Section) */

.single-bub_product .content .featimg {
  display: none;
  margin: 30px 0 40px;
}

/* Featured Image: Hide & Show */

@media screen and (max-width: 1200px) {
 
  .single-bub_product .sidebar .featimg {
    display: none;
  }

  .single-bub_product .content .featimg {
    display: block;
  }
}

@media screen and (max-width: 500px) {

  /* Featured Image */

  .single-bub_product .content .featimg-3d {
    float: none;
    margin: 25px 0 0;
    padding: 10px 15px 1px 10px;
    width: 100%;
  }

  .single-bub_product .featimg-3d::after {
    margin-bottom: 35px;
  }
}


/* Product Gallery
--------------------------------------------- */

.bub-product-gallery {
  margin: 0 0 30px;
}

.bub-product-gallery.mobile,
.bub-product-extras .bub-product-extras__button--gallery {
  /* Product gallery mobile section or button */
  display: none;
}

.bub-product-gallery__title {
  display: flex;
  flex-direction: row;
  font-size: 0.85rem;
  margin: 0 0 0px;
}

.bub-product-gallery__title span {
  padding: 0 7px 2px;
}

.bub-product-gallery__title::before, 
.bub-product-gallery__title::after {
  border-bottom: 1px solid #888;
  content: "";
  flex: 1 1 auto;
  margin: auto;
}

.bub-product-gallery__content {
  background: #f5f5f5;
  display: flex;
  flex-flow: row wrap;
}

.bub-product-gallery__item {
  flex: 1 0 55px;
  margin: 2.5px;
  max-width: 80px;
}

.bub-product-gallery__image {
  transition: filter 200ms;
}

.bub-product-gallery__image:hover {
  filter: brightness(70%);
}

.bub-product-gallery__caption {
  display: none;
}

@media screen and (max-width: 1200px) {

  .bub-product-extras .bub-product-extras__button--gallery {
    /* Product gallery mobile button */
    display: block;
  }
}

@supports (display: grid) {
  
  .bub-product-gallery__content {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    margin: 0;
    padding: 3px;
  }

  .bub-product-gallery__item {
    margin: 0px;
    max-width: 100%;
  }
}


/* Extras (Button Section)
--------------------------------------------- */
/* Variants, Shoplinks, Content (Leseprobe, Multimedia). */

/* Extras > Buttons: Common */

.bub-product-extras {
  margin: 30px -1px 40px -1px;
}

.bub-product-extras__buttons {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

.bub-product-extras__button {
  background: var(--theme2-background-def);
  /* background: var(--body-background-lt1);  */
  /* border: 1px solid #ddd; */
  /* Safari fix: Flexbox centering not working on button elements in some browser.
   Thus set toggle buttons to somthing other than flex. */
  display: block;
  font-size: 0.9rem;
  /* The value for flex-basis will be overwritten via JS for certain amounts of
     visible buttons to prevent having a full row width last button. */
  /* font-weight: bold; */
  flex: 1 0 calc(33.333% - 12px);
  line-height: 2.9em;
  padding: 0em 1em 0em 0.85em;
  position: relative;
  text-align: left;
  text-decoration: none !important;
  transition: all 200ms;
  white-space: nowrap;
}

.bub-product-extras__button:has(.bub-togglebox__indicator) {
  padding-right: 1em;
}

.bub-product-extras__button,
.bub-product-extras__button:hover {
  color: var(--theme2-color-def);
  /* color: var(--body-color-lt1); */
}

.bub-product-extras__button:hover,
.bub-product-extras__button.open {
  filter: var(--theme2-filter-acc);
  /* box-shadow: inset 0 3.5px #111; */
}

.bub-product-extras__button,
.bub-product-variants__title,
.bub-product-extras .bub-togglebox__trigger-child {
  /* text-transform: uppercase; */
}

/* Extras > Buttons: Togglebox */

.bub-product-extras .bub-togglebox__trigger-child {
  align-items: center;
    /* Prevent white space around child element. */
    display: inline-flex;
    padding-right: 1.7em;
}

.bub-product-extras .bub-togglebox__indicator {
  height: 100%;
  position: absolute;
    right: 0.8em;
}

.bub-product-extras .bub-togglebox__indicator::before {
  font: var(--fa-font-regular);
  font-size: 1em;
  content: '\f078';
  margin-top: -0.25em;
}

.bub-product-extras .bub-togglebox__trigger.open .bub-togglebox__indicator::before {
  content: '\f077';
  margin-top: -0.1em;
}


/* Extras (Common Content)
--------------------------------------------- */

.bub-product-extras__content {
  font-size: 0.87rem;
  line-height: 1.4;
  margin: 10px 0 0;
}

.bub-product-extras__content--details {
  background: var(--body-background-lt1);
  border: 1px solid #ddd;
  /* Force children to respect element borders. */
  overflow: auto;
}

.bub-product-extras__content--shoplinks {
}


/* Extras (Variants)
--------------------------------------------- */

/* Extras > Content: Details */

.bub-product-extras .bub-product-details__content {
  border-bottom: 1px solid #eee;
  padding: 0.8em 0em 0.85em;
  margin: 0.2em 1em 0;
}

.bub-product-extras .bub-product-details__item::after {
  content: '. ';
}

.bub-product-extras .bub-product-details__parties::after {
  content: ': ';
}

.bub-product-extras .bub-product-details__subline::first-letter {
  text-transform: uppercase;
}

.bub-product-extras .bub-product-details__sort::after {
  content: ', ';
}

  /* No dot after date, if it is the last child. */
  
.bub-product-extras .bub-product-details__date.bub-product-details__item:last-child::after {
  content: '';
}

/* Extras > Content: Variants */

.bub-product-variants__content {
  display: flex;
  flex-flow: row wrap;
  margin: 1.2em 1em 0.7em;
  padding: 0 0 0.2em;
}

.bub-product-variants__group {
  flex: 1 1 50%;
}

.bub-product-variants__group:nth-child(1) {
  padding-right: 1.2em;
}

.bub-product-variants__group:nth-child(2) {
  border-left: 1px solid #eee;
  padding-left: 1.3em;
}

.bub-product-variants__description {
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
  margin: 0 0 0.2em;
}

.bub-product-variants__item {
  display: block;
  padding: 0em 0em 0.1em;
}

.bub-product-variants__item a:focus {
  color: inherit;
}

@media screen and (max-width: 560px) {

  .bub-product-variants__content {
    display: block;
  }

  .bub-product-variants__group:nth-child(n) {
    border: none;
    padding: 0;
  }

  .bub-product-variants__group:not(:first-child) {
    margin-top: 1em;
  }
}

/* Extras > Content: Has Single Variant Only */

.bub-product-variants__group:only-child {
  padding-right: 0;
}

.bub-product-variants__group:only-child .bub-product-variants__description {
  padding: 0em 0.6em 0.7em;
}

.bub-product-variants__group:only-child .bub-product-variants__item {
  padding: 0.45em 0.6em;
}

.bub-product-variants__group:only-child .bub-product-variants__item:nth-child(odd) {
  background: #f5f5f5;
}

/* Extras > Content: Others */

.bub-product-variants__others {
  /* flex-basis: 100%; */
}

.bub-product-variants__others:nth-child(3) .bub-product-variants__description {
  border-top: 1px solid #eee;
  margin-top: 1em;
  padding: 1em 0 0;
}

.bub-product-variants__others .bub-product-variants__note {
  line-height: 1.5;
}

@media screen and (max-width: 560px) {

  .bub-product-variants__others .bub-product-variants__description {
    border: none;
    margin-top: 0;
    padding: 0;
  }  
}


/* Shoplinks
--------------------------------------------- */

/* Shoplinks: Note */

.bub-product-shoplinks__intro {
  background: var(--bg-base-lt1);
  border: 1px solid #ddd;
  color: var(--cl-base-lt1);
  padding: 0.8em 1em 0.7em;
  margin-bottom: 6px;
}

/* Shoplinks: Variant Buttons */

.bub-product-shoplinks__buttons {
  display: flex;
  flex-flow: row wrap;
  margin: 0 0 8px;
  gap: 8px;
}

.bub-product-shoplinks__button {
  align-items: center;
  background: #fafafa;
  border: 1px solid #ddd;
  box-shadow: inset 0 4px #bbb;
  color: #777;
  display: inline-flex;
  display: flex;
  flex: 1 0 0;
  height: 3.4em;
  justify-content: center;
  /* margin: 3px;  */
  padding: 0 2em;
  position: relative;
  transition: all 200ms;
  white-space: nowrap;
}

.bub-product-shoplinks__button .bub-togglebox__trigger-child {
  /* font-size: 1.05em; */
  /* text-transform: uppercase; */
}

.bub-product-shoplinks__button.open,
.bub-product-shoplinks__button:hover {
  background: var(--body-background-lt1);
  box-shadow: inset 0 4px var(--theme2-background-def);
  /* color: var(--body-color-lt1); */
  color: #000;
  /* border: 4px solid var(--theme2-background-def); */
  /* box-shadow: none; */
}

.bub-product-shoplinks__button.open .bub-togglebox__trigger-child,
.bub-product-shoplinks__button:hover .bub-togglebox__trigger-child {
  /* border: 4px solid var(--theme2-background-def); */
  /* font-weight: bold; */
}

.bub-product-shoplinks__button .bub-togglebox__indicator {
  font-size: 0.9em;
  margin-left: -0.2em;
  position: relative;
    top: 0.18em;
}

/* Shoplinks: Content */

.bub-product-shoplinks__list {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  gap: 6px;
  padding: 0;
}

.bub-product-shoplinks__item {
  display: inline-block;
  flex: 1 0 100px;
  height: 3.3em;
  list-style-type: none;
  text-align: center;
  white-space: nowrap;
}

.bub-product-shoplinks__item a {
  background: var(--body-background-lt1);
  border: 1px solid #ddd;
  color: var(--cl-base-lt1);
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  justify-content: center;
  line-height: 1;
  padding: 0 1.3em;
}

.bub-product-shoplinks__item :is(a, a:focus) {
  text-decoration: none;
}

.bub-product-shoplinks__item--ghost {
  background: transparent !important;
  height: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

.bub-product-shoplinks__item a:hover,
.bub-product-shoplinks__item a:focus {
  /* border-top: 3px solid var(--theme2-background-def); */
  /* box-shadow: inset 0 3px var(--theme2-background-def); */
  color: inherit;
  filter: brightness(98%);
}

/* Shoplinks: Image Links */

.bub-product-shoplinks__list.has-image {
  display: inline-block;
  font-size: 0;
}

.bub-product-shoplinks__item.has-image a {
  padding: 0;
}

.bub-product-shoplinks__item.has-image img {
  height: 100%;
  width: auto;
}


/* Other Products
--------------------------------------------- */

.bub-product-others .before-title:not(:empty)::after {
  content: ': '
}