/*
 * Product page buy box (src/ProductSizeInfo.php, js/product-size-info.js): measurements and the price of the chosen
 * size next to the size choice and the cart button.
 * Only classes prefixed jo-dims, jo-variation-info, jo-size- are styled here.
 */

.jo-variation-info[hidden],
.jo-variation-info [hidden],
.jo-dims[hidden] {
  display: none !important;
}

/* between size choice (table.variations, margin-bottom 20px) and quantity / cart button */
.single-product-main .product-infos .jo-variation-info {
  margin: -6px 0 20px;
  color: #191919;
}

.single-product-main .product-infos .jo-dims {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #191919;
}

.single-product-main .product-infos .jo-dims .jo-dims__label {
  font-weight: 700;
}

.single-product-main .product-infos .jo-variation-info .jo-variation-info__dims + .jo-variation-info__price {
  margin-top: 8px;
}

/* the variation price uses the theme's price style; only the margins of the price under the title are dropped */
.single-product-main .product-infos .jo-variation-info .price {
  margin: 0;
}

.single-product-main .product-infos .jo-variation-info .jo-pp-shipping-note--single {
  margin: 2px 0 0;
}

/* lines from "Produktdetails" right above "Anzahl" / quantity and cart button */
.single-product-main .product-infos .jo-size-facts {
  margin: 0 0 18px;
}

.single-product-main .product-infos .jo-size-facts .jo-dims + .jo-dims {
  margin-top: 4px;
}

/* link "Größentabelle" */
.single-product-main .product-infos .jo-size-chart-link {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #191919;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* at the size choice: on the line of the label "Größe:", ending where the dropdown ends
   (the theme's dropdown: width 100%, max-width 314px) */
.single-product-main .product-infos form.variations_form table.variations td.value {
  position: relative;
}

.single-product-main .product-infos .jo-size-chart-link--choice {
  position: absolute;
  left: min(100%, 314px);
  bottom: 100%;
  margin-bottom: 6px;
  transform: translateX(-100%);
  white-space: nowrap;
}

.single-product-main .product-infos .jo-size-facts .jo-size-facts__chart {
  margin: 2px 0 0;
}

/* target block in the tab "Produktdetails" gets the focus after the jump, without a focus frame */
.single-product-tabs .contentTab.description > .content[tabindex="-1"]:focus {
  outline: none;
}
