/* =========================
   WooCommerce Cart Block Hardening
   ========================= */

.wp-block-woocommerce-cart,
.wc-block-cart {
  --cart-thumb-size: 80px;
  --cart-gap: 1rem;
  --cart-row-padding: 1rem;
}

/* Ruhige Grundfläche */
.wp-block-woocommerce-cart {
  min-height: 60vh;
}

.wc-block-components-sidebar-layout.wc-block-cart {
  align-items: start;
  gap: 2rem;
}

/* Verhindert harte Sprünge im Main/Sidebar-Bereich */
.wc-block-cart__main,
.wc-block-cart__sidebar,
.wc-block-cart-items,
.wc-block-cart-items tbody,
.wc-block-cart-items__row {
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

/* Tabellenlayout stabilisieren */
.wc-block-cart-items {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.wc-block-cart-items__header-image,
.wc-block-cart-item__image {
  width: calc(var(--cart-thumb-size) + 1rem);
}

.wc-block-cart-items__header-total,
.wc-block-cart-item__total {
  width: 140px;
  text-align: right;
  vertical-align: top;
}

.wc-block-cart-items__header-product,
.wc-block-cart-item__product {
  width: auto;
}

/* Zeilen ruhig halten */
.wc-block-cart-items__row {
  vertical-align: top;
}

.wc-block-cart-items td,
.wc-block-cart-items th {
  padding: var(--cart-row-padding) 0;
}

.wc-block-cart-items__row + .wc-block-cart-items__row td {
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Bildbereich fixieren */
.wc-block-cart-item__image {
  vertical-align: top;
}

.wc-block-cart-item__image a {
  display: block;
  width: var(--cart-thumb-size);
}

.wc-block-cart-item__image img {
  display: block;
  width: var(--cart-thumb-size);
  height: var(--cart-thumb-size);
  min-width: var(--cart-thumb-size);
  min-height: var(--cart-thumb-size);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Produktspalte stabilisieren */
.wc-block-cart-item__product {
  vertical-align: top;
}

.wc-block-cart-item__wrap {
  min-height: var(--cart-thumb-size);
}

.wc-block-components-product-name {
  display: inline-block;
  margin-bottom: .35rem;
  line-height: 1.35;
  text-decoration: none;
}

.wc-block-cart-item__prices,
.wc-block-components-product-metadata,
.wc-block-cart-item__quantity {
  margin-top: .4rem;
}

/* Beschreibung darf Layout nicht sprengen */
.wc-block-components-product-metadata__description p {
  margin: 0;
  line-height: 1.45;
}

/* Mengenbereich mit fester Höhe */
.wc-block-cart-item__quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
}

.wc-block-components-quantity-selector {
  min-height: 40px;
  flex: 0 0 auto;
}

.wc-block-cart-item__remove-link {
  flex: 0 0 auto;
}

/* Totals ruhig halten */
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .4rem;
}

/* Sidebar stabilisieren */
.wc-block-cart__sidebar {
  position: relative;
}

.wc-block-components-totals-wrapper,
.wc-block-cart__submit,
.wc-block-cart__payment-options {
  contain: layout paint;
}

/* Loading-Zustände visuell abfedern */
.wp-block-woocommerce-cart.is-loading,
.wc-block-components-sidebar-layout.is-loading,
.wc-block-woocommerce-filled-cart-block.is-loading {
  opacity: .999;
}

.wp-block-woocommerce-cart.is-loading .wc-block-cart__main,
.wp-block-woocommerce-cart.is-loading .wc-block-cart__sidebar {
  opacity: .72;
}

.wp-block-woocommerce-cart.is-loading .wc-block-cart-items__row,
.wp-block-woocommerce-cart.is-loading .wc-block-cart__sidebar > * {
  filter: saturate(.9);
}

/* Platzhalter-Effekt ohne hartes Springen */
.wp-block-woocommerce-cart.is-loading .wc-block-cart-item__image img {
  background: #f2f2f2;
}

/* Buttons / Inputs gegen Layoutsprünge */
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button,
.wc-block-components-button {
  box-sizing: border-box;
}

/* Lange Inhalte dürfen nicht quer schieben */
.wc-block-cart-item__product,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-cart-item__total {
  overflow-wrap: anywhere;
}

/* Desktop-Zweispalter sauber */
@media (min-width: 781px) {
  .wc-block-components-sidebar-layout.wc-block-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2rem;
  }

  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    min-width: 0;
  }
}

/* Mobile ruhig stapeln */
@media (max-width: 780px) {
  .wc-block-components-sidebar-layout.wc-block-cart {
    display: block;
  }

  .wc-block-cart__sidebar {
    margin-top: 2rem;
  }

  .wc-block-cart-items__header-total,
  .wc-block-cart-item__total {
    width: 110px;
  }

  .wc-block-cart-item__image img,
  .wc-block-cart-item__image a {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .wc-block-cart-item__wrap {
    min-height: 64px;
  }
}









/* Product page head **************************************************************/



#product-head {
  display: flex;
  gap: 60px;
  max-width: 1280px;
  margin: 60px auto;
  align-items: flex-start;
}

#product-head > .fe-gallery {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

#product-head > .summary.entry-summary {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  #product-head {
    flex-direction: column;
  }
}






/* Gallery: left column */
body.single-product div.product .fe-gallery {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* Summary: right column */
body.single-product div.product .summary.entry-summary {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* Tabs and related products: full width, below both columns */
body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related.products {
  grid-column: 1 / -1;
}

/* Stack on smaller screens */
@media (max-width: 900px) {
  body.single-product div.product {
    grid-template-columns: 1fr;
  }

  body.single-product div.product .summary.entry-summary {
    grid-column: 1;
    grid-row: 2;
  }
}




/* ---- Summary content styling ---- */

.summary.entry-summary .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pp-text-light);
  margin-bottom: 24px;
}

.summary.entry-summary .woocommerce-product-details__short-description p {
  margin: 0;
}

.summary.entry-summary form.cart {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 50px 0;
}

.summary.entry-summary .quantity {
  margin: 0;
}

.summary.entry-summary .quantity .qty {
  width: 70px;
  padding: 10px 12px;
  border: 1.5px solid var(--pp-border);
  border-radius: 4px;
  font-size: 15px;
}

.summary.entry-summary .single_add_to_cart_button {
  background: var(--pp-accent);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.summary.entry-summary .single_add_to_cart_button:hover {
  background: var(--pp-text-dark);
}

.summary.entry-summary .product_meta {
  font-size: 13px;
  color: var(--sulo-black);
  padding-top: 16px;
}

.summary.entry-summary .product_meta .posted_in--categories {
  display: flex;
  gap: 8px;
}

.summary.entry-summary .product_meta .posted_in--categories a {
  color: var(--sulo-black);
  padding: 2px 6px;
  border: 1px solid lightgrey;
  border-radius: 4px;
  text-decoration: none;
}

.summary.entry-summary .product_meta .posted_in--categories a:hover {
  color: var(--sulo-white);
  background: #2b2b2b;
}





/* Category and Brand on product page */

.summary.entry-summary .product_meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--pp-text-light);
  padding-top: 16px;
  margin-top: 24px;
}

.summary.entry-summary .product-brand-logo {
  max-height: 32px;
  width: auto;
  display: block;
}

.summary.entry-summary .product_meta a {
  color: var(--pp-text-light);
}




/* ---- Related products ---- */
.related.products {
  margin-top: 60px;
  border-top: 1px solid var(--pp-border);
  padding-top: 32px;
}

.related.products h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
}





/* Buttons Product Request */


.single_add_to_cart_button.button.alt {
    position: relative;
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.4em 4.2em;
    background-color: var(--sulo-green) !important;
    border: 2px solid var(--sulo-green);
    color: var(--sulo-white);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

/* sliding background layer */
.single_add_to_cart_button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -4px;
    height: 100%;
    width: 0%;
    background: var(--sulo-white);
    border: 2px solid var(--sulo-white);
    z-index: 0;
    transition: width 0.4s ease;
}

/* .single_add_to_cart_button.button.alt:hover {
    color: var(--sg-color-dark) !important;
} */

/* swipe on hover */
/* .single_add_to_cart_button.button.alt:hover::before {
    width: 102%;
    color: var(--sg-color-dark);
} */


/* .is-jumpnavbar - Single Productpage Page Menu */

.is-jumpnavbar {
  background: #2b2b2b;
}

.is-jumpnavbar-probe {
  height: 1px;
}

.is-jumpnavbar.is-stuck {
  position: fixed;
  top: 0;
  z-index: 100;
}

.is-jumpnavbar-placeholder {
  display: none;
}
.is-jumpnavbar-placeholder.is-active {
  display: block;
}

.is-jumpnavbar ul {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.is-jumpnavbar ul::-webkit-scrollbar {
  display: none;
}

.is-jumpnavbar ul li {
  display: flex;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.is-jumpnavbar ul li a {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  /* border: 1px solid #fff; */
  color: #fff;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.is-jumpnavbar ul li a:hover,
.is-jumpnavbar ul li a:focus,
.is-jumpnavbar ul li a.is-active {
  /* background: #fff;
  color: #2b2b2b; */
  border-bottom: 3px solid var(--sulo-white);
}







/* Small simple Product carousel / feature carousel .is-small-carousel */

.is-small-carousel .slick-track {
  display: flex !important;
}

.is-small-carousel .slick-slide {
  height: auto;
  display: flex !important;
}

.is-small-carousel .slick-slide > div {
  display: flex;
  width: 100%;
}

.is-small-carousel .sow-carousel-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 6px 2px;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.is-small-carousel .sow-carousel-item:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}

.is-small-carousel .sow-carousel-item:hover .sow-carousel-item-title,
.is-small-carousel .sow-carousel-item:hover .widget-title  {
  color: #ffffff;
}

.is-small-carousel .sow-carousel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.is-small-carousel .sow-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-small-carousel .sow-carousel-item img {
  max-width: 100%;
}

.is-small-carousel .sow-carousel-item-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.is-small-carousel .widget-title {
  font-size: 15px;
  margin-top: auto;
  padding-top: 12px;
}

.is-small-carousel img {
  height: 120px !important;
  width: auto;
}





/* Is product feature carousel */

.is-product-feature .slick-track {
  display: flex !important;
}

.is-product-feature .slick-slide {
  height: auto;
  display: flex !important;
}

.is-product-feature .slick-slide > div {
  display: flex;
  width: 100%;
}

.is-product-feature .sow-carousel-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.is-product-feature .sow-carousel-item:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}

.is-product-feature .sow-carousel-item:hover .sow-carousel-item-title,
.is-product-feature .sow-carousel-item:hover .widget-title  {
  color: #ffffff;
}

.is-product-feature .sow-carousel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.is-product-feature .sow-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-product-feature .sow-carousel-item img {
  max-width: 100%;
  margin-bottom: 12px;
}

.is-product-feature .sow-carousel-item-title {
  font-size: 21px;
  font-weight: 600;
}








/* Product Single Page Accordion Style */

/* Reset gegen Plugin-Standardstyles */
.is-product-accordion .sow-accordion .sow-accordion-panel {
  margin-bottom: 0 !important;
}

.is-product-accordion .sow-accordion-panel-header,
.is-product-accordion .sow-accordion-panel-header-container {
  background: none !important;
}

/* Zebra-Färbung NUR für die 5 Hauptpunkte (Downloads, Technical Data,
   Accessories, How to Use, FAQ) - NICHT für die FAQ-Unterfragen. */
.is-product-accordion > div > div > .sow-accordion > .sow-accordion-panel:nth-child(odd) .sow-accordion-panel-header {
  background-color: #f7f7f7 !important;
}
.is-product-accordion > div > div > .sow-accordion > .sow-accordion-panel:nth-child(even) .sow-accordion-panel-header {
  background-color: #ffffff !important;
}

.is-product-accordion .sow-accordion-title {
  transition: all 0.3s ease;
}

.is-product-accordion .sow-accordion-panel:not(.sow-accordion-panel-open):hover .sow-accordion-title {
  padding-left: 10px;
}
.is-product-accordion .sow-accordion-panel-open {
  border-bottom-color: var(--sulo-red) !important;
}
.is-product-accordion .sow-accordion-panel-content .sow-accordion-title {
  font-size: 18px !important;
  margin: 0 !important;
}
.is-product-accordion .sow-accordion-panel {
  border-bottom: 1px solid var(--sulo-lightgrey);
}
.is-product-accordion .sow-accordion-panel:hover .sow-accordion-title {
  color: var(--sulo-red) !important;
}
.is-product-accordion .sow-accordion-open-close-button {
  transition: transform 0.3s ease;
}
.is-product-accordion .sow-accordion-panel:not(.sow-accordion-panel-open):hover .sow-accordion-open-close-button {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
.is-product-accordion .sow-accordion-panel:hover .sow-accordion-open-button span::before,
.is-product-accordion .sow-accordion-panel:hover .sow-accordion-open-button span::after,
.is-product-accordion .sow-accordion-panel-open .sow-accordion-close-button span::before,
.is-product-accordion .sow-accordion-panel-open .sow-accordion-close-button span::after {
  background: var(--sulo-red) !important;
}

.is-product-accordion .sow-accordion-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  color: var(--sulo-black) !important;
  font-size: 26px;
}

.is-product-accordion .sow-accordion-title {
  font-family: 'Roboto Slab' !important;
  font-size: inherit !important;
  font-weight: 400;
}

.is-product-accordion .sow-accordion-open-close-button {
  flex-shrink: 0;
  margin-left: 20px;
  width: 20px;
  height: 20px;
  position: relative;
}

.is-product-accordion .sow-accordion-open-button,
.is-product-accordion .sow-accordion-close-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.is-product-accordion .sow-accordion-open-close-button span {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
}
.is-product-accordion .sow-accordion-open-close-button span::before,
.is-product-accordion .sow-accordion-open-close-button span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.is-product-accordion .sow-accordion-open-button span::before {
  width: 16px;
  height: 2px;
}

.is-product-accordion .sow-accordion-open-button span::after {
  width: 2px;
  height: 16px;
}

.is-product-accordion .sow-accordion-close-button span::before {
  width: 16px;
  height: 2px;
  background: green;
}

.is-product-accordion .sow-accordion-close-button span::after {
  display: none;
}




/* Product Single Page Tabs Style */

.is-product-tab .sow-tabs {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.is-product-tab .sow-tabs-tab-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* width: 220px; */
}

.is-product-tab .sow-tabs-tab {
  padding: 16px 0 16px 16px;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: #1a1a1a;
  width: 100%;
}

.is-product-tab .sow-tabs-tab {
  background: none;
  border-left: 2px solid var(--sulo-lightgrey);
}

.is-product-tab .sow-tabs-tab:hover {
  background: var(--sulo-red);
  border-left: 2px solid var(--sulo-red);
}

.is-product-tab .sow-tabs-title {
  font-size: 16px;
  line-height: 1.4;
}

.is-product-tab .sow-tabs-tab-selected {
  border-left: 2px solid var(--sulo-red);
}

.is-product-tab .sow-tabs-panel-container {
  flex: 1;
  min-width: 0;
}

.sow-carousel-container a.sow-carousel-previous,
.sow-carousel-container a.sow-carousel-next {
  border: none !important;
  color: var(--sulo-black) !important;
  font-size: 30px !important;
}






.is-product-tab .sow-tabs-panel-container .panel-layout .panel-grid-cell {
  display: flex;
}



  .is-download-items .panel-grid-cell {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  .is-download-items .so-panel {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 260px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .is-download-items .so-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(20, 20, 15, 0.12);
    border-color: #d4d1c6;
  }

.is-download-items .panel-widget-style,
.is-download-items .so-widget-sow-editor,
.is-download-items .siteorigin-widget-tinymce {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: auto !important;
  margin: 0 !important;
}

/* Karte: gleicher Look wie die Feature-Kacheln (grau, abgerundet, dunkler Hover) */
.is-download-items .panel-widget-style {
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.is-download-items .panel-widget-style:hover {
  background-color: #2b2b2b;
}

.is-download-items .siteorigin-widget-tinymce h3 {
  flex: 1;
  margin: 24px 22px 0;
  color: var(--sulo-red);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  transition: color 0.2s ease;
}

.is-download-items .panel-widget-style:hover .siteorigin-widget-tinymce h3 {
  color: #fff;
}

.is-download-items .siteorigin-widget-tinymce h3 sup {
  font-size: 11px;
  font-weight: 400;
}

.is-download-items .siteorigin-widget-tinymce > p {
  margin: 20px 0 0 !important;
  padding: 0 22px;
  color: var(--sulo-dark, #111);
  transition: color 0.2s ease;
}

.is-download-items .panel-widget-style:hover .siteorigin-widget-tinymce > p {
  color: #fff;
}

/* Download-Link: dezente Zeile innerhalb der Karte statt eigenem Farbverlauf-Hover */
.is-download-items .siteorigin-widget-tinymce a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  margin-top: 20px;
  color: var(--sulo-dark, #111);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  transition: color 0.2s ease;
}

.is-download-items .panel-widget-style:hover .siteorigin-widget-tinymce a {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.15);
}

.is-download-items .siteorigin-widget-tinymce a::after {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>") center / contain no-repeat;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-download-items .siteorigin-widget-tinymce a:hover::after,
.is-download-items .siteorigin-widget-tinymce a:focus-visible::after {
  transform: translateY(2px);
}


/* Tab Products Page inside accordion */


.is-product-tab .sow-tabs {
    position: relative; /* definiert die Grenze, an der sticky "endet" */
}

.is-product-tab .sow-tabs-tab-container {
    position: sticky;
    top: 0; /* Abstand von oben, ab dem es "kleben" bleibt – ggf. anpassen, falls du z.B. eine fixe Header-Höhe hast, dann z.B. top: 80px */
    z-index: 10; /* damit es über dem scrollenden Panel-Inhalt liegt */
    background: #fff; /* wichtig! sonst scrollt der Inhalt sichtbar "durch" die Tabs */
}








/* Product Data Table */

.is-product-data-table {
  width: 100%;
  border-collapse: collapse;
}
.is-product-data-table thead th {
  background: #1a1a1a;
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}
.is-product-data-table tbody tr:has(th[colspan]) th {
  background: #f0f0f0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  color: #444;
}
.is-product-data-table th[scope="row"],
.is-product-data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 400;
  white-space: nowrap;
}
.is-product-data-table th[scope="row"] {
  font-weight: 500;
  color: #1a1a1a;
}
.is-product-data-table th[scope="row"] span {
  color: #e84e3c;
  font-weight: 700;
  margin-right: 6px;
}
.is-product-data-table tbody tr:not(:has(th[colspan])):hover {
  background-color: #fdf1ef;
  transition: background-color 0.2s ease;
}
.is-product-data-table tbody tr:not(:has(th[colspan])):hover th,
.is-product-data-table tbody tr:not(:has(th[colspan])):hover td {
  border-color: #f3c9c2;
}
.is-product-data-table tbody tr:nth-child(even):not(:has(th[colspan])) {
  background-color: #fafafa;
}

/* RESPONSIVE – einfacher horizontaler Scroll, kein Karten-Umbau, kein Content im CSS */
@media (max-width: 769px) {
  .is-product-data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }




  .is-product-tab .sow-tabs {
    display: flex;
    flex-direction: column;
    position: relative; /* definiert die Grenze, an der sticky "endet" */
  }

  .is-product-tab .sow-tabs-tab-container {
      position: sticky;
      top: 0; /* Abstand von oben, ab dem es "kleben" bleibt – ggf. anpassen, falls du z.B. eine fixe Header-Höhe hast, dann z.B. top: 80px */
      z-index: 10; /* damit es über dem scrollenden Panel-Inhalt liegt */
      background: #fff; /* wichtig! sonst scrollt der Inhalt sichtbar "durch" die Tabs */
      display: flex;
      flex-direction: row;
      gap: 8px;
      order: 1;
  }

  .is-product-tab .sow-tabs-panel-container {
    order: 2;
    width: 100%;
  }

}








/*----------------------------------------------------------------------
Special Contactform for products - is-product (docked bar)
Weiß, leicht abgerundete Ecken (nicht rund/pill), dezenter Teal-Glow.
Button bleibt immer sichtbar (dient offen auch als Schließen-Trigger).
Original-Klassennamen unverändert.
----------------------------------------------------------------------*/

.is-contactform-product {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 800px !important;
  margin: 0;
  padding: 12px 14px;
  background-color: var(--sulo-white);
  border: 1px solid rgba(17, 17, 17, 0.06);
  /* dezenter, farbiger Glow statt reinem Grauschatten -> chic statt neutral */
  box-shadow:
    0 10px 30px -6px rgba(0, 118, 118, 0.22),
    0 2px 8px rgba(17, 17, 17, 0.06);
  z-index: 100;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.3s ease, grid-template-columns 0.3s ease;
}

.is-contactform-product.active {
  transform: translate(-50%, 0);
}

.is-contactform-product:hover {
  transform: translate(-50%, -3px);
  box-shadow:
    0 16px 40px -6px rgba(0, 118, 118, 0.3),
    0 4px 10px rgba(17, 17, 17, 0.08);
}





.is-contactform-product {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 800px !important;
  margin: 0;
  padding: 12px 14px;
  background-color: var(--sulo-white);
  border: 1px solid rgba(17, 17, 17, 0.06);
  box-shadow:
    0 10px 30px -6px rgba(0, 118, 118, 0.22),
    0 2px 8px rgba(17, 17, 17, 0.06);
  z-index: 100;
  cursor: pointer;
  overflow: visible; /* sicherstellen, dass hier NICHTS clippt */
  transition: transform 0.35s ease, box-shadow 0.3s ease, grid-template-columns 0.3s ease;
}

/* Bild: absolut positioniert, dadurch unabhängig von Grid-Zeilenhöhe.
   Ragt bewusst über die Oberkante der Leiste hinaus. */
.is-contactform-product img {
  position: absolute;
  height: 80px;
  width: 80px;
  object-fit: contain;
  z-index: 2;
  margin: -40px 0px -10px -65px;
  padding: 2px;
}

/* Textspalte muss jetzt manuell Platz für das Bild lassen,
   da es aus dem Grid-Fluss genommen wurde */
.is-contactform-product .textwidget {
  grid-column: 1 / 3;
  padding-left: 62px; /* 48px alte Bildbreite + etwas Abstand */
}



/* Beim Öffnen: ruhige, weiße Formular-Karte.
   Bild wird ausgeblendet (Platz für Formular), Button bleibt in der
   Kopfzeile stehen -> übernimmt die Schließen-Funktion. */
.is-contactform-product.active:has(.is-contactform-product-form.active) {
  max-width: min(90vw, 600px);
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: default;
}

.is-contactform-product.active:has(.is-contactform-product-form.active) img {
  display: none;
}









.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}

.woocommerce div.product div.images img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Miniaturbilder-Leiste */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    max-width: 100%;
    gap: 10px;
    margin-top: 16px !important;
    padding: 6px 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox */
}

/* Jedes Thumbnail als klickbare "Karte" */
.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px;
    background: var(--sulo-white);
    border: 1px solid transparent;
    padding: 8px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li:hover {
    border-color: var(--sulo-red);
    transform: translateY(-2px);
}

.woocommerce div.product div.images .flex-control-thumbs li:hover > img {
    opacity: 1;
}

/* Aktives / ausgewähltes Thumbnail hervorheben */
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active {
    border-color: var(--sulo-red); /* Farbe nach Bedarf anpassen, z.B. eure Markenfarbe */
}

.woocommerce div.product div.images .flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;
    display: block;
}







/* ==========================================================================
   Woo Product Details – Attributes Table + Highlights List
   Add this to Design > Customizer > Additional CSS,
   or into your child theme's style.css
   ========================================================================== */

/* --- Attributes Table (dl) --------------------------------------------- */

.woo-product-attributes-table {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em 1.5em;
	margin: 0 0 1.5em 0;
	padding: 1.5em;
	background: #fff;
}

.woo-product-attribute-item {
	display: flex;
	flex-direction: column;
}

.woo-product-attribute-label {
	margin: 0 0 0.25em 0;
	color: #2f6f6a;
	font-weight: 600;
}

.woo-product-attribute-value {
	margin: 0;
	color: #222;
}

/* Reset default <dl>/<dd> browser margins so the grid layout stays intact */
.woo-product-attributes-table dt,
.woo-product-attributes-table dd {
	margin: 0;
	padding: 0;
}

/* --- Highlights List (ul) ------------------------------------------------ */

.woo-product-highlights-list,
.woo-product-highlights-list li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.woo-product-highlights-list {
	margin: 0 0 1.5em 0;
	padding: 0;
}

.woo-product-highlights-list li {
	position: relative;
	margin-bottom: 0.75em;
	padding-left: 1.4em;
	color: #222;
}

.woo-product-highlights-list li::marker {
	content: "";
}

.woo-product-highlights-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	background: #222;
}

/* --- Responsive ----------------------------------------------------------
   Tablet: 2 columns
   Mobile: 1 column, stacked
   ========================================================================== */

@media (max-width: 900px) {
	.woo-product-attributes-table {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.woo-product-attributes-table {
		grid-template-columns: 1fr;
		gap: 1.25em;
		padding: 1.25em;
	}

	.woo-product-highlights-list li {
		margin-bottom: 0.6em;
	}
}














/* ==========================================================================
   Woo Pretty/AJAX Attribute Filters – basic starting CSS
   Add this to Design > Customizer > Additional CSS,
   or into your child theme's style.css
   ========================================================================== */

.wpf-products-container {
	transition: opacity 0.15s ease;
}

.wpf-products-container.wpf-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* --- Filter groups (one per attribute) ---------------------------------- */

.wpf-filter-group {
	margin-bottom: 1.5em;
}

.wpf-filter-title {
	margin: 0 0 0.5em 0;
	font-size: 1em;
	font-weight: 600;
	color: #2f6f6a;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wpf-filter-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpf-filter-item {
	margin-bottom: 0.4em;
}

.wpf-filter-item a {
	text-decoration: none;
	color: #222;
}

.wpf-filter-item a:hover {
	color: #2f6f6a;
}

.wpf-filter-item.wpf-filter-active a {
	font-weight: 700;
	color: #2f6f6a;
}

.wpf-filter-item.wpf-filter-active a::before {
	content: "✓ ";
}

/* --- Responsive: filter groups side by side on desktop, stacked on mobile - */

@media (min-width: 900px) {
	.wpf-filter-groups {
		display: flex;
		flex-wrap: wrap;
		gap: 2em;
	}

	.wpf-filter-groups .wpf-filter-group {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.wpf-filter-title {
		font-size: 0.95em;
	}
}






.wc-attribute-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.wc-attribute-card {
    /* border: 1px solid lightgrey; */
    border-radius: 16px;
    /* padding: 10px 16px 10px 16px; */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Immer exakt 3 pro Reihe, egal welche Bildschirmgröße.
       2 Lücken (je 12px) zwischen 3 Karten = 24px, daher /3 minus 24px. */
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: calc((100% - 24px) / 3);
    transition: all 0.3 ease;
}

.wc-attribute-card:hover {
    background: #2b2b2b;
    padding: 10px 12px 8px 22px;
    transition: all 0.3 ease;
}

.wc-attribute-card:hover .wc-attribute-label,
.wc-attribute-card:hover .wc-attribute-value {
  color: var(--sulo-white);
}



.wc-attribute-label {
    color: var(--sulo-red);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.wc-attribute-value {
    color: var(--sulo-black);
    font-size: 16px;

}

.wc-attribute-swatches {
  display: inline-flex;
  gap: 6px;
}

.wc-attribute-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.15);
}

@media (max-width: 600px) {
  .wc-attribute-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}







/* ==========================================================================
   WooCommerce Cart Block - Styles
   Layout: Produkte links (70%) / Summe rechts (30%)

   Nutzt dasselbe Schriftgrößen-Token-Set wie minimal-quote-flat.css,
   damit beide Komponenten optisch identisch wirken.
   ========================================================================== */

.wp-block-woocommerce-cart {
	--sg-field-bg:      #f4f4f2;
	--sg-field-border:  rgba(32, 32, 32, 0.15);
	--sg-gap:           2.5rem;

	/* geteiltes Schriftgrößen-Set, identisch in der Quote-CSS */
	--sg-text-base:   1rem;
	--sg-text-small:  0.9rem;
	--sg-text-label:  0.8rem;

	font-size: var(--sg-text-base);
	color: var(--sg-color-dark);
	padding: 3rem 0;
}

.wc-block-components-sidebar-layout.wc-block-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--sg-gap);
}

.wc-block-components-main.wc-block-cart__main {
	flex: 1 1 70%;
	max-width: calc(70% - (var(--sg-gap) / 2));
}

.wc-block-components-sidebar.wc-block-cart__sidebar {
	flex: 1 1 30%;
	max-width: calc(30% - (var(--sg-gap) / 2));
}

/* ---------- Produktliste ---------- */

.wc-block-cart-items {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--sg-text-base);
}

.wc-block-cart-items__header th {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: var(--sg-text-label);
	color: var(--sg-color-dark);
	padding: 0.75rem 1rem;
}

.wc-block-cart-items__row {
	background: var(--sg-field-bg);
}

.wc-block-cart-items__row + .wc-block-cart-items__row {
	box-shadow: 0 -8px 0 var(--sg-color-light);
}

.wc-block-cart-items__row td {
	padding: 1.25rem 1rem;
	vertical-align: top;
	border: none;
}

.wc-block-cart-item__image {
	width: 96px;
	padding-right: 0.5rem !important;
}

.wc-block-cart-item__image img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.wc-block-cart-item__product {
	padding-left: 1.5rem !important;
	font-size: var(--sg-text-base);
}

.wc-block-cart-item__total {
	width: 120px;
	text-align: right;
	white-space: nowrap;
	padding-left: 1rem !important;
	font-size: var(--sg-text-base);
}

.wc-block-components-product-name {
	color: var(--sg-color-dark);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--sg-text-base);
}

.wc-block-components-product-name:hover {
	color: var(--sg-color-primary);
}

.wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
	color: var(--sg-color-dark);
	font-weight: 500;
	font-size: var(--sg-text-small);
}

.wc-block-cart-item__prices del {
	color: #8a8a8a;
	opacity: 1;
}

.wc-block-cart-item__prices ins {
	color: var(--sg-color-primary);
	text-decoration: none;
}

.wc-block-components-product-metadata__description p {
	color: #6b6b6b;
	font-size: var(--sg-text-small);
}

.wc-block-components-sale-badge {
	background: var(--sg-color-accent);
	color: var(--sg-color-primary);
	border: none;
	border-radius: 0;
	font-weight: 700;
	font-size: var(--sg-text-small);
	padding: 0.25em 0.7em;
	white-space: nowrap;
}

/* ---------- Mengen-Auswahl - gleicher Rahmen/gleiche Höhe wie Quote ---------- */

.wc-block-components-quantity-selector {
	border: 1px solid var(--sg-field-border);
	background: var(--sg-color-light);
	display: inline-flex;
	align-items: stretch;
	height: 2.5em;
	margin-top: 0.75rem;
}

.wc-block-components-quantity-selector__input {
	border: none;
	background: transparent;
	width: 3.5em;
	text-align: center;
	color: var(--sg-color-dark);
	font-size: var(--sg-text-base);
}

.wc-block-components-quantity-selector__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--sg-color-primary);
}

.wc-block-components-quantity-selector__button {
	border: none;
	background: transparent;
	color: var(--sg-color-dark);
	width: 2.25em;
	cursor: pointer;
	border-radius: 0;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--sg-color-accent);
	color: var(--sg-color-primary);
}

.wc-block-components-quantity-selector__button:disabled {
	color: #c4c4c4;
	cursor: default;
}

/* Trash-Icon: fill:currentColor erzwingen, damit Hover-Farbe greift
   (dasselbe Icon nutzt minimal-quote-remove als CSS-Mask) */
.wc-block-cart-item__remove-link {
	width: 1.4em;
	height: 1.4em;
	border: none;
	background: none;
	color: var(--sg-color-dark);
	cursor: pointer;
	padding: 0;
}

.wc-block-cart-item__remove-link svg path {
	fill: currentColor;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--sg-color-primary);
}

/* ---------- Cross-sells ---------- */

.wp-block-woocommerce-product-collection h2 {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--sg-text-label);
	color: var(--sg-color-dark);
}

.wc-block-components-product-image img {
	object-fit: cover;
}

.wc-block-components-product-button__button {
	background: var(--sg-color-primary);
	color: var(--sg-color-light);
	border: none;
	border-radius: 0;
	font-weight: 700;
	font-size: var(--sg-text-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.8em 1.6em;
}

.wc-block-components-product-button__button:hover {
	background: var(--sg-color-dark);
}

/* ---------- Sidebar / Summe ---------- */

.wc-block-components-sidebar {
	background: var(--sg-field-bg);
	padding: 1.75rem;
	font-size: var(--sg-text-base);
}

.wc-block-cart__totals-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--sg-text-label);
	margin-bottom: 1.5rem;
}

.wc-block-components-totals-coupon {
	border: 1px solid var(--sg-field-border);
	background: var(--sg-color-light);
	margin-bottom: 1.25rem;
}

.wc-block-components-panel__button {
	color: var(--sg-color-dark);
	font-weight: 600;
	font-size: var(--sg-text-base);
	padding: 0.9em 1.1em;
}

.wc-block-components-panel__button-icon path {
	fill: var(--sg-color-dark);
}

.wc-block-components-totals-item {
	border: none;
	padding: 0.6rem 0;
	font-size: var(--sg-text-base);
}

.wc-block-components-totals-footer-item {
	border-top: 2px solid var(--sg-color-dark);
	margin-top: 0.75rem;
	padding-top: 1.25rem;
	font-weight: 700;
}

.wc-block-components-totals-item__label {
	color: var(--sg-color-dark);
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	color: var(--sg-color-dark);
}

/* ---------- Checkout Button ---------- */

.wc-block-cart__submit-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--sg-color-primary);
	color: var(--sg-color-light);
	border: none;
	border-radius: 0;
	padding: 1.1em;
	font-weight: 700;
	font-size: var(--sg-text-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	margin-top: 0.5rem;
}

.wc-block-cart__submit-button:hover {
	background: var(--sg-color-dark);
	color: var(--sg-color-light);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.wp-block-woocommerce-cart {
		padding: 2rem 0;
	}

	.wc-block-components-sidebar-layout.wc-block-cart {
		flex-direction: column;
	}

	.wc-block-components-main.wc-block-cart__main,
	.wc-block-components-sidebar.wc-block-cart__sidebar {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

@media (max-width: 782px) {
	.wc-block-cart-items {
		table-layout: auto;
	}

	.wc-block-cart-items__header {
		display: none;
	}

	.wc-block-cart-items__row {
		display: flex;
		flex-wrap: wrap;
		padding: 1.25rem;
	}

	.wc-block-cart-items__row td {
		padding: 0.4rem 0 !important;
		width: auto;
	}

	.wc-block-cart-item__image {
		flex: 0 0 auto;
	}

	.wc-block-cart-item__product,
	.wc-block-cart-item__total {
		flex: 1 1 calc(100% - 96px);
		padding-left: 1.25rem !important;
		text-align: left;
	}
}