.wpp-center {
  display: flex;
  flex-flow: column;
  /* align-items: center; */
  justify-content: space-between;
  flex-grow: 1;
}

.wpp-center a {
  display: flex !important;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
}

.wpp-container {
  /* background: #7e9aa8; */
  /* padding: 0.4rem 1rem; */
  color: #6f7780;

  /* display: flex; */

  display: grid;
  grid-template-columns: 1fr 1fr;

  width: 100%;
  max-width: 100%;

  justify-content: space-between;
  box-sizing: border-box;
}

.wpp-title {
  font-size: 1.5rem !important;
  color: #33496a !important;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.wpp-description {
  color: #6f7780;
  height: 100%;
}

.wpp-hr {
  width: 100%;
  margin: 0.8rem 0 !important;
  background-color: #6f7780 !important;
}

/* .wpp-container h1 {
  margin: 0 !important;
  font-size: 1.5rem;
  white-space: nowrap;
} */

.wpp-left {
  display: flex;
  flex-flow: column nowrap;
  text-align: initial;

  width: 100%;

  padding: 0 0.4rem;
  justify-content: space-between;
}

.wpp-left > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
}

.wpp-left svg {
  border: solid #6f7780 1px;
  border-radius: 8px;
  padding: 0.2rem;
  width: 90%;
}

.wpp-left svg + svg {
  margin-left: 0.2rem;
}

.wpp-right {
  /* display: flex; */

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;

  padding: 0 0.4rem;
  border-left: #6f7780 1px solid !important;
  box-sizing: border-box;
  color: #6f7780;
  gap: 0.4rem;
  /* border box funktioniert nicht? */
  /* padding-left: 0.3rem; */
}

/* .wpp-container svg {
  fill: white;
  margin: 0.1rem;
  width: 2rem;
  min-width: 2rem;
} */

.wpp-right > div {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;

  padding: 0.2rem;
  font-size: 1rem;

  box-sizing: border-box;

  border: 1px #6f7780 solid;
  border-radius: 4px;
  white-space: nowrap;
}

/* .wpp-right > div + div {
  margin-left: 0.4rem;
} */

ul.products {
  display: grid !important;
  max-width: calc(280px * 4 + 10rem);
  column-gap: 15px;
  row-gap: 73px !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, auto)) !important;
}

ul.products::before {
  display: none !important;
}

ul.products > li {
  width: 100% !important;
  display: flex;
  flex-flow: column;
}

ul.products > li > div {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
}

ul.products > li > div > a {
  flex-grow: 1;
  display: flex !important;
  flex-flow: column;
}

/* produktseite, vorschlaege */
@media screen and (min-width: 900px) and (max-width: 1217px) {
  .single-product ul.products {
    grid-template-columns: 1fr 1fr !important;
  }

  /* damit es nicht die ganze Seite einnimmt, wenn tablet sized */
  .single-product ul.products > * {
    max-width: 400px;
  }
}

/* @media screen and (max-width: 600px) {
  .elementor-element.elementor-products-grid ul.products {
    grid-template-columns: 1fr !important;
  }
} */

.ast-article-single.product {
  height: 100%;
}

.ast-article-single.product .astra-shop-thumbnail-wrap {
  height: 100% !important;
  display: flex;
  flex-flow: column;
}

.astra-shop-thumbnail-wrap {
  height: 100%;
}

.astra-shop-summary-wrap {
  display: none !important;
}

/* front page */

@media screen and (min-width: 1400px) {
  .elementor-element-b3f5d24 .elementor-element-populated {
    position: absolute !important;
    width: 100vw !important;
    height: 25rem !important;
  }
}

.woocommerce-LoopProduct-link > *:not(:first-child) {
  display: none !important;
}

.grid-item-info-buttons {
  align-items: center !important;
  /* margin-top: 1.4rem; */
  /* height: 53px !important; */
  padding: 12px 0;
  background: #1880a4;
  border: solid 2px #4699b5;
  border-top: none;
  padding-right: 10px;
}

/* product gallery "prev" arrow sits flush against the Detailinformationen box (left:0) - give it clearance */
.woo-product-gallery-slider .flaticon-back.slick-arrow {
  left: 20px !important;
}

/* ------------------------------------------------------------------ *
 * Detailinformationen grid (Server 12265 + Corporate 14149): keep the
 * 2-column layout on mobile instead of Elementor's default 1-column
 * stack, and shrink everything (icon, padding, type) so title +
 * subtitle + the 6 fields fit in a much shorter vertical space.
 * fbd2321 / e45ea2e / 5e027c8 (box / title / subtitle) share the same
 * element ID on both templates, so one rule covers both.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-element-6814cad, .elementor-element-dd73541,
  .elementor-element-aabd6c9, .elementor-element-caccf28,
  .elementor-element-1dd7cb1, .elementor-element-65a88a5,
  .elementor-element-b1f8e8f, .elementor-element-d2f02d7,
  .elementor-element-7defc9f, .elementor-element-9b0dd9d,
  .elementor-element-a0b7d6d, .elementor-element-9f42e78 {
    width: 50% !important;
  }

  .elementor-element-6814cad > .elementor-widget-wrap,
  .elementor-element-dd73541 > .elementor-widget-wrap,
  .elementor-element-aabd6c9 > .elementor-widget-wrap,
  .elementor-element-caccf28 > .elementor-widget-wrap,
  .elementor-element-1dd7cb1 > .elementor-widget-wrap,
  .elementor-element-65a88a5 > .elementor-widget-wrap,
  .elementor-element-b1f8e8f > .elementor-widget-wrap,
  .elementor-element-d2f02d7 > .elementor-widget-wrap,
  .elementor-element-7defc9f > .elementor-widget-wrap,
  .elementor-element-9b0dd9d > .elementor-widget-wrap,
  .elementor-element-a0b7d6d > .elementor-widget-wrap,
  .elementor-element-9f42e78 > .elementor-widget-wrap {
    background-size: 26px !important;
    background-position: 92% 7px !important;
    padding: 8px 10px 8px 10px !important;
  }

  .elementor-element-169b364, .elementor-element-89b41f0,
  .elementor-element-c83c8fe, .elementor-element-ee875f0,
  .elementor-element-eef14c0, .elementor-element-6a4b1d2,
  .elementor-element-20b78f5, .elementor-element-7bab070,
  .elementor-element-7fcbeeb, .elementor-element-9d55cde,
  .elementor-element-0d3b7fa, .elementor-element-6522f23 {
    min-height: 1.1rem !important;
  }

  .elementor-element-fbd2321 .elementor-widget-text-editor .elementor-widget-container,
  .elementor-element-fbd2321 .elementor-widget-text-editor .elementor-widget-container p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .elementor-element-fbd2321 .attr-all {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .elementor-element-e45ea2e,
  .elementor-element-e45ea2e .elementor-heading-title {
    font-size: 26px !important;
  }

  .elementor-element-5e027c8 p {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* ------------------------------------------------------------------ *
 * Wishlist button (Detailinformationen box, Server 12265 + Corporate
 * 14149): was a bare blue text link, restyled as an outline pill to
 * match the site's existing "Mehr Infos" pill-button language
 * (rounded-full, small caps-free label) while staying in the box's
 * own white-on-teal palette instead of copying the yellow CTA color,
 * since this is a secondary action, not the primary "view product" CTA.
 * ------------------------------------------------------------------ */
.elementor-element-fbd2321 .yith-wcwl-add-to-wishlist {
  margin-top: 14px;
}

.elementor-element-fbd2321 .yith-wcwl-add-button a.add_to_wishlist,
.elementor-element-fbd2321 .yith-wcwl-wishlistexistsbrowse a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px 9px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.elementor-element-fbd2321 .yith-wcwl-add-button a.add_to_wishlist::before,
.elementor-element-fbd2321 .yith-wcwl-wishlistexistsbrowse a::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-10-9.3C.5 8 1.8 4.6 5 3.6c2.2-.7 4.4.1 5.6 1.9l1.4 2 1.4-2c1.2-1.8 3.4-2.6 5.6-1.9 3.2 1 4.5 4.4 3 7.6-2.5 4.7-10 9.3-10 9.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-10-9.3C.5 8 1.8 4.6 5 3.6c2.2-.7 4.4.1 5.6 1.9l1.4 2 1.4-2c1.2-1.8 3.4-2.6 5.6-1.9 3.2 1 4.5 4.4 3 7.6-2.5 4.7-10 9.3-10 9.3z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.elementor-element-fbd2321 .yith-wcwl-add-button a.add_to_wishlist:hover,
.elementor-element-fbd2321 .yith-wcwl-wishlistexistsbrowse a:hover {
  background-color: #fff;
  color: #1880a3 !important;
  border-color: #fff;
}

.elementor-element-fbd2321 .yith-wcwl-wishlistexistsbrowse .feedback {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------ *
 * Header wishlist icon + count badge (global header, template 11046).
 * Rendered by the [mw_header_wishlist_count] shortcode.
 * ------------------------------------------------------------------ */
.mw-header-wishlist-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  text-decoration: none !important;
}

.mw-header-wishlist-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: #0170b9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-10-9.3C.5 8 1.8 4.6 5 3.6c2.2-.7 4.4.1 5.6 1.9l1.4 2 1.4-2c1.2-1.8 3.4-2.6 5.6-1.9 3.2 1 4.5 4.4 3 7.6-2.5 4.7-10 9.3-10 9.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-10-9.3C.5 8 1.8 4.6 5 3.6c2.2-.7 4.4.1 5.6 1.9l1.4 2 1.4-2c1.2-1.8 3.4-2.6 5.6-1.9 3.2 1 4.5 4.4 3 7.6-2.5 4.7-10 9.3-10 9.3z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.mw-header-wishlist-link:hover .mw-header-wishlist-icon {
  background-color: #0a3560;
  transform: scale(1.08);
}

.mw-header-wishlist-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  background-color: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.mw-header-wishlist-badge.mw-hidden {
  display: none;
}